详解css外边距折叠（margin collapsing）

详解CSS外边距折叠

什么是外边距折叠？

在 CSS 中，相邻的两个块级元素垂直方向的外边距会发生重叠，这种行为叫做外边距折叠。当发生外边距折叠时，相邻两个元素之间将会只有一个外边距，而不是两个外边距之和。

外边距折叠只会发生在块级元素上，行内元素没有外边距，不会发生外边距折叠。

哪些情况会发生外边距折叠？

1. 相邻兄弟元素之间的外边距会发生折叠。

2. 父元素和第一个/最后一个子元素之间的外边距会发生折叠。

3. 空块级元素的外边距会被折叠（一个空块级元素是指没有任何内容或内部元素的块级元素）。

如何避免外边距折叠？

1. 使用 padding 或 border 代替外边距。

2. 给元素添加 overflow: auto; 或 overflow: hidden;，可以防止外边距折叠。

示例

示例一

在以下示例中，两个相邻兄弟元素之间的外边距发生了折叠，box1 的外边距被折叠到了 box2 上。

<div class="box1">Box 1</div>
<div class="box2">Box 2</div>

.box1 {
  margin-bottom: 20px;
}

.box2 {
  margin-top: 30px;
}

在这里，box1 的下边距为 20px，box2 的上边距为 30px，但实际上它们之间的间距只有 30px。

示例二

在以下示例中，一个父元素和子元素之间的外边距发生了折叠，parent 的底边距被折叠到了 grandchild1 上。

<div class="parent">
  <div class="child1">Child 1</div>
  <div class="child2">Child 2</div>
  <div class="child3">
    <div class="grandchild1">Grandchild 1</div>
    <div class="grandchild2">Grandchild 2</div>
  </div>
</div>

.parent {
  margin-bottom: 20px;
}

.grandchild1 {
  margin-top: 30px;
}

在这里，parent 的下边距为 20px，但它与 grandchild1 之间的距离只有 30px，原因是 parent 和它的第一个子元素 child1 之间的外边距折叠了，导致 parent 的底边距被折叠到了 grandchild1 上。我们可以给 parent 添加一个 padding 或 border 来避免这种情况。