CSS边距折叠
示例
当两个边距垂直相互接触时，它们将被折叠。当两个边缘水平接触时，它们不会塌陷。
相邻垂直边距的示例：
考虑以下样式和标记：
div{
margin: 10px;
}<div>
some content
</div>
<div>
some more content
</div>由于垂直边距会相互重叠，因此它们之间的距离将为10px。（间距将不是两个边距的总和。）
相邻水平边距的示例：
考虑以下样式和标记：
span{
margin: 10px;
}<span>some</span><span>content</span>
它们之间的间距为20px，因为水平边距不会彼此重叠。（间距将是两个边距的总和。）
重叠大小不同
.top{
margin: 10px;
}
.bottom{
margin: 15px;
}<div class="top">
some content
</div>
<div class="bottom">
some more content
</div>这些元素在垂直方向上的间距为15px。边距尽可能多地重叠，但是较大的边距将确定元素之间的间距。
重叠保证金陷阱
.outer-top{
margin: 10px;
}
.inner-top{
margin: 15px;
}
.outer-bottom{
margin: 20px;
}
.inner-bottom{
margin: 25px;
}<div class="outer-top">
<div class="inner-top">
some content
</div>
</div>
<div class="outer-bottom">
<div class="inner-bottom">
some more content
</div>
</div>两种文字之间的间距是多少？（悬停以查看答案）
间距为25像素。由于所有四个边距彼此接触，因此它们将崩溃，从而使用四个边距中的最大边距。
现在，如果我们在上面的标记中添加一些边框呢？
div{
border: 1px solid red;
}两种文字之间的间距是多少？（悬停以查看答案）
间距将为59px！现在，只有.outer-top和.outer-bottom的边距彼此接触，并且是唯一折叠的边距。其余边距由边框分隔。所以我们有1px+10px+1px+15像素+20像素+1像素+25像素+1像素。（1px是边界...）
父子元素之间的折叠边距：
HTML：
<h1>Title</h1> <div> <p>Paragraph</p> </div>
的CSS
h1 {
margin: 0;
background: #cff;
}
div {
margin: 50px 0 0 0;
background: #cfc;
}
p {
margin: 25px 0 0 0;
background: #cf9;
}在上面的示例中，仅适用最大边距。您可能希望该段落位于距h160px的位置（因为div元素的边距顶部为40px，而p的边距顶部为20px）。这不会发生，因为边距一起塌陷以形成一个边距。