CSS 弹性盒模型中的外边距折叠

在本文中，我们将介绍CSS弹性盒模型中的外边距折叠现象。外边距折叠是指当两个相邻的块级元素的外边距接触到一起时，它们中间的空白区域会折叠成一个较大的外边距。

阅读更多：CSS 教程

什么是外边距折叠？

外边距折叠是指在一些特定的情况下，块级元素的外边距会发生重叠，形成一个较大的外边距。通常情况下，相邻的块级元素之间会有一个空白区域，这个空白区域的大小由两个相邻元素的外边距决定。在外边距折叠的情况下，这个空白区域会折叠成一个较大的外边距，而不是两个外边距相加。

什么情况下会发生外边距折叠？

外边距折叠只会发生在垂直方向上，而不会发生在水平方向上。外边距折叠的三种情况如下：

相邻的兄弟元素之间的外边距会发生折叠。这种情况下，较大的外边距会覆盖较小的外边距，形成一个新的外边距。例如：

<style>
    .box1 {
        margin-bottom: 20px;
    }
    .box2 {
        margin-top: 30px;
    }
</style>

<div class="box1">这是第一个盒子</div>
<div class="box2">这是第二个盒子</div>

在上面的例子中，第二个盒子的外边距20px被第一个盒子的外边距30px所覆盖，所以最终它们之间的间距为30px。

父元素的外边距会与第一个和最后一个子元素的外边距发生折叠。在这种情况下，较大的外边距同样会覆盖较小的外边距，形成一个新的外边距。

<style>
    .container {
        margin: 20px;
    }
    .box {
        margin-top: 30px;
    }
</style>

<div class="container">
    <div class="box">这是第一个盒子</div>
    <div class="box">这是第二个盒子</div>
</div>

在上面的例子中，容器元素的外边距20px与第一个盒子的外边距30px发生了折叠，所以最终它们之间的间距为30px。

空的块级元素的外边距会发生折叠。在这种情况下，外边距的折叠只会发生在块级元素的垂直方向上。例如：

<style>
    .empty-box {
        margin: 30px;
    }
</style>

<div class="empty-box"></div>

在上面的例子中，空的盒子元素的外边距30px会发生折叠，所以它的上边距和下边距都是30px。

如何阻止外边距折叠？

虽然外边距折叠在某些情况下可以带来便利，但有时候我们需要阻止外边距折叠。下面是一些阻止外边距折叠的方法：

使用浮动或定位：给外边距折叠的元素添加浮动或定位，可以阻止外边距折叠。例如：

<style>
    .box1 {
        margin-bottom: 20px;
    }
    .box2 {
        margin-top: 30px;
        float: left;
    }
</style>

<div class="box1">这是第一个盒子</div>
<div class="box2">这是第二个盒子</div>

在上面的例子中，给第二个盒子添加浮动后，它的外边距就不会与第一个盒子的外边距发生折叠。

使用padding代替外边距：如果不想让外边距折叠，可以使用padding属性替代外边距。例如：

<style>
    .box1 {
        margin-bottom: 20px;
    }
    .box2 {
        padding-top: 30px;
    }
</style>

<div class="box1">这是第一个盒子</div>
<div class="box2">这是第二个盒子</div>

在上面的例子中，通过给第二个盒子添加padding-top属性，可以实现和外边距相同的效果，但不会发生折叠。