什么是外边距折叠？什么情况下出现？怎么解决？

1. 什么是外边距折叠？

外边距折叠指的是当两个相邻的元素都设置了上下外边距时，它们之间的上下外边距会发生重叠，而不是简单地取最大值。这个现象被称为“折叠”，因为两个外边距顶部和底部的距离会被折叠成一个距离。

外边距折叠只会发生在垂直方向上，水平方向上不会出现折叠。

下面是一个简单的例子，演示了外边距折叠的情况：

.box1 {
  margin-top: 20px;
}
.box2 {
  margin-top: 30px;
}

这段 CSS 代码会让两个相邻的块级元素上下外边距折叠，即它们之间的距离只有 30px，而不是 50px。

外边距折叠是 CSS 中经常遇到的问题，了解什么时候会发生外边距折叠以及如何避免折叠，是成为一名合格的前端开发人员的必修课。

2. 什么情况下出现外边距折叠？

外边距折叠发生的情况主要有以下几种：

2.1 相邻兄弟元素的上下外边距折叠

相邻的兄弟元素之间会发生外边距折叠，即它们之间的上下外边距会折叠成一个值。

下面是一个例子：

<div class="box1"></div>
<div class="box2"></div>
.box1 {
  margin-bottom: 20px;
}
.box2 {
  margin-top: 30px;
}

在这个例子中，.box1 和 .box2 之间的上下外边距会发生折叠，它们之间的距离只有 30px。

2.2 父元素与第一个/最后一个子元素的上下外边距折叠

如果一个父元素没有 padding 值或 border 值，它与第一个子元素的上下外边距会折叠，也就是它们之间的距离变成了它们上下外边距的最大值。

同样地，如果一个父元素没有 padding 值或 border 值，它与最后一个子元素的上下外边距也会折叠。

下面是一个例子：

<div class="parent">
  <div class="child1"></div>
  <div class="child2"></div>
</div>
.parent {
  margin-top: 20px;
}
.child1 {
  margin-top: 30px;
}
.child2 {
  margin-bottom: 40px;
}

在这个例子中，.parent 和 .child1 之间的上下外边距会发生折叠，.child2 和 .parent 之间的上下外边距也会发生折叠。因为 .parent 没有 padding 值或 border 值，所以 .child1 和 .parent 之间的距离为 30px，.child2 和 .parent 之间的距离为 40px。

2.3 空元素的上下外边距折叠

如果一个元素没有实际内容，它与其父元素的上下外边距也会发生折叠。

下面是一个例子：

<div class="parent">
  <div></div>
  <div class="child"></div>
</div>
.parent {
  margin-top: 20px;
  margin-bottom: 40px;
}
.child {
  margin-top: 30px;
}

在这个例子中，第一个 div 元素没有实际内容，所以它与 .parent 之间的上下外边距会发生折叠，.child 与 .parent 之间的上下外边距也会发生折叠。因此，.parent 与 .child 之间的距离只有 40px，而不是 50px。

3. 怎么解决外边距折叠？

下面是几种解决外边距折叠的方法：

3.1 使用 padding 值或 border 值

使用 padding 值或 border 值可以避免父元素与第一个/最后一个子元素的上下外边距折叠。

<div class="parent">
  <div class="child1"></div>
  <div class="child2"></div>
</div>
.parent {
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
}
.child1 {
  margin-top: 30px;
}
.child2 {
  margin-bottom: 40px;
}

在这个例子中，.parent 添加了 border 值，所以它与 .child1 之间的上下外边距没有折叠。

3.2 使用 inline-block 元素

使用 inline-block 元素可以避免相邻兄弟元素的上下外边距折叠。

<div class="box1"></div>
<div class="box2"></div>
.box1 {
  margin-bottom: 20px;
  display: inline-block;
}
.box2 {
  margin-top: 30px;
  display: inline-block;
}

在这个例子中，.box1 和 .box2 都被设置为 inline-block 元素，所以它们之间的上下外边距没有折叠。

3.3 使用定位

使用定位可以避免空元素的上下外边距折叠。

<div class="parent">
  <div></div>
  <div class="child"></div>
</div>
.parent {
  margin-top: 20px;
  margin-bottom: 40px;
  position: relative;
}
.child {
  margin-top: 30px;
  position: absolute;
  top: 0;
}

在这个例子中，.parent 添加了 position: relative，.child 添加了 position: absolute 和 top: 0。这样，.child 就不会与 .parent 的上下外边距发生折叠。

3.4 使用清除浮动

在使用浮动布局的时候，浮动元素和父元素之间可能会发生上下外边距折叠。这种情况下，可以使用清除浮动的方法来解决折叠问题。

<div class="parent">
  <div class="child"></div>
</div>
<div class="clear"></div>
.parent {
  margin-top: 20px;
  margin-bottom: 40px;
}
.child {
  margin-top: 30px;
  float: left;
}
.clear {
  clear: both;
}

在这个例子中，.parent 和 .child 之间的上下外边距会折叠。加上一个空的 div 元素 .clear，设置 clear: both 可以清除浮动，避免产生折叠。

总结

外边距折叠是 CSS 中一个容易出现的问题，出现折叠的情况是比较有规律的，我们只需要在设计布局时留意这些情况，使用不同的方法来解决问题，就可以避免折叠产生。