Joh*_*son 8 css margin margins collapse
关于折叠边距的CSS 2.1规范的第8.3.1节说明:
如果具有间隙的元素的顶部和底部边距相邻,则其边缘会随着后续兄弟的邻接边缘而折叠,但是所产生的边距不会随着父块的下边缘而崩溃.
这是我的,肯定不稳定的尝试,从这个陈述中做出一些事情:
该语句考虑了一个元素X,其中:
X有间隙,因此"clear:left;","clear:right"中的任何一个.或者"明确:两者;" 属性已应用于它.
由于X的顶部和底部边距是相邻的,在正常流动的情况下,我们正在考虑以下情况:
然后规范说,"它的边缘随着兄弟姐妹的邻接边缘而崩溃",但如上所述,最多只有一个兄弟姐妹,所以这基本上必须意味着如果有一个兄弟姐妹,那么边缘就会崩溃.
"但是由此产生的边际不会随着父块的底部边缘而崩溃." - 我不明白这一点:如果底部边缘与兄弟的上边距相邻,那么除非兄弟的高度为零,否则它不能与父块的下边距相邻.
我完全糊涂了.有人可以用更好的方式解释这个陈述,或许只是举几个例子吗？谢谢.
首先,一些澄清:
具有间隙的元素是clear设置为除了none 并且实际上清除浮动的东西的元素.
顶部和底部边缘相邻的元件相互邻接,而不是兄弟姐妹.我们讨论的是没有边框或填充的0高度元素,因此元素的上边距和下边距相互接触.当这种情况发生时,它们会一起崩溃,这种情况称为崩溃.
现在,让我们看一个例子:
body {
border:solid;
}
#container {
margin: 20px;
background: blue;
}
#floated {
float: left;
width: 20px;
height: 20px;
background: red;
}
#cleared {
clear: left;
margin-top: 10px;
margin-bottom: 20px;
}
#following {
margin-top: 30px;
}<body>
<div id=container>
<div id=floated></div>
<div id=cleared></div>
<div id=following></div>
<div>
</body>在这里玩它:http://jsbin.com/wuvilu/1/edit？html,css,output
由于身体上有边框,您可以看到蓝色#container周围的20px边距.红色#floated也是一个明显的20px乘20px.
然后,由于它是0高度没有填充而没有边框,#clean的顶部和底部边缘相互折叠.它们也与#following的上边缘相邻.这个崩溃边际的大小是30px,是三者中最大的.
由于#following高度为0并且没有填充且没有边框,因此我们的30px边距与#container的下边距相邻,并且会随之折叠.除了你现在引用的规则,它没有.
由于它不会随着容器的底部边缘而坍塌,因此必须将其放置在其中的某个位置.哪里？它从#floater的下边缘上方10px开始,并向下延伸20px.为什么？#cleared的上边距是参与此崩溃边际的最大边距,因此我们从它开始的位置开始.由于它是10px,我们的折叠边距比#floater(它前面的元素)的底边高出10px.
是的,这是疯了,大多数涉及崩溃的场景都是疯狂的.折叠通过是一个可怕的想法,它不应该使它成为CSS,但它确实有人知道更好的之前,现在我们必须对付它,所有的疯狂的后果.