我很难理解嵌套元素中垂直边距折叠的概念。我在 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 的新手解释它吗?
最佳答案
要记住两条规则:
- 如果边距接触,它们就会折叠。
- 嵌套元素“依偎”如果只有边距将它们分开。
- “流”之外的元素表现不同。也就是说,此行为不适用于 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">
<div id="inner">
A
</div>
</div>
杀死崩溃:(See that at jsFiddle.)
使用边框,而不是前导文本:( Fiddle )
关于css - 嵌套的垂直边距折叠如何工作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25805369/