代码如下:
<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？
我知道红色框的底部边距和蓝色框的顶部边距已经“塌陷”，但据我了解，如果您有边框或填充，则边距不会塌陷(我试过两者 - 仍然是相同的结果。
最佳答案
边距不会通过边界折叠。它们确实会相互坍塌。
看这个例子:
<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 周围的边距中。
您的两个页边距彼此接触，之间它们之间没有边框 — 因此它们会折叠。
关于html - 为什么我的边距会崩溃，即使我对所有内容都有边框？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5352592/