CSS保证金如何运作？

Question

在下面的代码,不应该之间的裕度.box1和.box2被20像素作为.box1具有10px的底部边缘和.box2具有10px的上边距.

<div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
</div>

CSS:

.box1{
    margin-bottom: 10px;
}

.box2{
    margin-top: 10px;
}

Answer 1

不,两个盒子之间的差距只有10px.

你说两次同样的事情,"必须有一个10px以下的第1个边框"和"必须有比box2高10px的边距"

可以这样想:

哈利和莎莉有两个人.哈利站在离莎莉10英尺的地方.莎莉离哈利有多远？是的,你得到它,10英尺!

当你试图水平地将两个盒子排成一行并说"box1右边必须有10px的边距"和"box2的左边必须有10px的边距"时,这个例子就会失败.你可以说哈利站在莎莉身上10英尺......但那时听起来像是小学数学问题. (10认同)
也就是说,折叠边距*的想法主要取决于你刚刚解释的内容,除非它基于段落之间的前导,这就是为什么它只适用于垂直边距而不适用于水平边距. (4认同)

Answer 2

第一个盒子的底部边缘和第二个盒子的顶部边缘被认为是相邻的; 因此,他们崩溃成一体.

请注意,这仅适用于垂直边距; 无论情况如何,水平边距都不会崩溃.如果你让两个盒子浮动,使它们水平排列,并给出.box1一个右边距和.box2一个左边距,它们之间的总空间确实是20px.

实际上,即使你没有将它们水平排列,但浮动它们并给它们清除以便.box2清除.box1,底部和顶部边缘将不再崩溃.这两种情况都在规范中提到.

Answer 3

您需要了解保证金折叠.下图描述了边缘崩溃的情况.

在此输入图像描述