css - 嵌套的垂直边距折叠如何工作？

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

要记住两条规则:

1. 如果边距接触，它们就会折叠。
2. 嵌套元素“依偎”如果只有边距将它们分开。
3. “流”之外的元素表现不同。也就是说，此行为不适用于 float 、position:fixed 或 position:absolute 元素。

所以对于这个 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%;
}

边距折叠到接触边距的最大值，并且嵌套的 div“依偎”到容器的开头，如下所示:( See it at jsFiddle. )

但是，当两个边距分开时——例如，通过边框或容器中的前面内容——边距不再接触，因此它们不再折叠。

EG，一点点不间断的空格，像这样:

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

杀死崩溃:(See that at jsFiddle.)

使用边框，而不是前导文本:( Fiddle )