以下是代码:
<html>
<head>
<title></title>
<style type="text/css">
* {border: 0px; padding: 0px;}
#greenbox
{
margin: 20px;
border: 5px solid green;
}
#redbox
{
margin: 20px;
border: 5px solid red;
}
#bluebox
{
border: 5px solid blue;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;
margin-top: 20px; /*COLLAPSES - why??*/
}
</style>
</head>
<body>
<div id="greenbox">
<div id="redbox">
red box
</div>
<div id="bluebox">
bluebox
</div>
</div>
</body>
</html>
基本上,它是一个绿色的盒子,里面有一个红色的盒子和一个蓝色的盒子。
为什么红框和蓝框之间的垂直空间不是40px?
据我所知,红色方框的下边距和蓝色方框的上边距已“折叠”,但据我了解,如果你有边框或填充边距,边距不会崩溃(我试过了)两者 - 仍然是相同的结果。
答案 0 :(得分:2)
边距不会因边界而崩溃。他们确实互相崩溃。
见这个例子:
<style>
body { background: black; }
.red { background: red; }
.blue { background: blue; }
.border { border: solid white 1px; }
div { margin: 20px; min-height: 30px; width: 50% }
</style>
<div class="red">
<div class="blue">
</div>
</div>
<div class="red border">
<div class="blue border">
</div>
</div>
当边框存在时,蓝色div顶部的边距将蓝色div的顶部推离其内部红色div的顶部。当边框不存在时,边距会穿过边缘并折叠到红色div周围的边距。
你的两个边缘相互接触,在>之间没有边界 - 所以它们会崩溃。
答案 1 :(得分:2)
边距位于框模型的边界外,因此边框与折叠的边距无关。
您可以在此处阅读框模型:http://www.w3.org/TR/CSS21/box.html
您可以在此处阅读折叠边距:http://www.w3.org/TR/CSS21/box.html#collapsing-margins