边距崩溃

当两个边距垂直相互接触时，它们会折叠。当两个边距水平接触时，它们不会折叠。

相邻垂直边距的示例：

考虑以下样式和标记：

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>

这两个文本之间的间距是多少？ （悬停看答案）

间距为 25px。由于所有四个边距相互接触，它们将会崩溃，因此使用四个边缘中的最大边距。

现在，如果我们在上面的标记中添加一些边框，那该怎么办呢？

div{
    border: 1px solid red;
}

这两个文本之间的间距是多少？ （悬停看答案）

间距为 59px！ 现在只有 .outer-top 和 .outer-bottom 的边距相互接触，并且是唯一的折叠边距。剩余的边距由边框分隔。所以我们有 1px + 10px + 1px + 15px 的 + 20px + 1px + 25px + 1px。 （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;
}

在上面的示例中，仅适用最大的边距。你可能已经预期该段落将位于距离 h1 60px 处（因为 div 元素的边距顶部为 40px 而 p 的边距为 20px）。这种情况不会发生，因为边距会一起折叠形成一个边距。