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

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. "流"之外的元素表现不同.也就是说,此行为不适用于浮动,或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"依偎"到容器的开头,如下所示:( 在jsFiddle看到它.)

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

EG,只是一个小的,不破坏的白色空间,如下所示:

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

杀死崩溃:( 见jsFiddle.)

使用边框,而不是引导文字:( 小提琴)

Answer 2

图表可能会有所帮助:

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

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