Question

我很难掌握嵌套元素中垂直边距折叠的概念。我在http://www.howtocreate.co.uk/tutorials/css/margincollapsing发表了一篇文章，解释它是如何运作的，但是对它的解释感到困惑。所以在它的例子中它引用了如下2个元素

<div style="margin-top:10px">
<div style="margin-top:20px">
A
</div>
</div>

看到内部div的边距为20px，这将适用于整个代码块。令我困惑的是之后的一切，还没有看到Internet Explorer 7的问题。是否有人能够以简化的方式解释它以获得CSS的完整新手？

Answer 1

要记住的两条规则：

如果边距触及，则会崩溃。
嵌套项目“依偎”，如果仅边距将它们分开。
“Flow”之外的元素表现不同。也就是说，此行为不适用于浮动，或位置：固定或位置：绝对元素。

所以对于这个HTML（嵌套的div）：

<div id="outer"> 
    <div id="inner">
        A
    </div>
</div>

和这个初始的CSS：

#outer {
    margin-top:10px;
    background:blue;
    height: 100px;
}
#inner {
    margin-top:20px;
    background:red;
    height: 33%;   
    width: 33%;
}

边距折叠到触摸边距的 max ，嵌套div“依偎”到容器的开头，如下所示：（See it at jsFiddle.）
Nested margin collapse

但是，当两个边距分开时 - 例如边界或容器中的前置内容 - 边距不再接触，因此它们不再崩溃。

EG，只是一个小小的，没有破坏的空白区域，如下所示：

<div id="outer">&nbsp;
    <div id="inner">
        A
    </div>
</div>

杀死崩溃：（See that at jsFiddle.）
Nested margin doesn't collapse

使用边框而不是引导文字：（Fiddle）
no-collapse, border

Answer 2

图表可能有所帮助：

Illustration of collapsing margins for nested divs

如果不明显：蓝色=外部div，红色=内部div;我用恒定的高度和水平定位绘制它们。你可以弄清楚如果高度适合内容等会发生什么。

“折叠前”列显示如果边距不被认为是相邻的，例如如果你绘制蓝色/外部div的边框;但如果没有边框，则会显示“After collapsing”列。顶行从示例中切换两个边距，因为我认为这种情况下的行为更直观;底部显示了howtocreate的示例，并与顶行保持一致。

Answer 3

要记住的两条规则：

如果保证金触及，则会崩溃。如果只有边距将它们分开，则嵌套项目“依偎”。 “流”之外的元素表现不同。也就是说，此行为不适用于浮动或position：fixed或position：absolute elements。

Brock Adams是正确的，但我还想补充一点，“overflow：hidden”也可以防止嵌套边距崩溃。

嵌套垂直边距如何折叠起作用？

3 个答案: