CSS 为什么我的简单 CSS 边距没有合并

在本文中，我们将介绍为什么你的简单 CSS 边距（margins）没有发生合并的原因，并提供示例说明。CSS 边距合并是一个常见的问题，特别是在垂直方向上，当两个元素相邻时，它们的边距可能没有如你期望的那样合并。

阅读更多：CSS 教程

了解边距折叠（Margin Collapsing）

在解释为什么简单的 CSS 边距没有合并之前，我们首先需要了解什么是边距折叠。在 CSS 盒模型中，每个元素都有一个内边距（padding）和外边距（margin）。边距折叠指的是相邻的两个元素的外边距会合并成一个边距的现象。合并后的边距取两个相邻元素中的较大值。

边距折叠只会在特定情况下发生，以下情况会导致边距折叠：

兄弟元素：当两个兄弟元素相邻时，它们的垂直边距会发生折叠。
父子元素：当一个父元素没有内边距（padding）、边框（border）或浮动（float）时，它的子元素的上外边距和下外边距会折叠。

边距折叠的限制条件

虽然 CSS 边距折叠是一个常见的现象，但它并不是无限制的。边距折叠有一些限制条件，当满足这些条件时，则不会发生边距折叠：

内容（Content）：如果两个相邻元素之间存在内容（包括空格、换行等），则不会发生边距折叠。例如，在一个 <div> 元素中有一些文本，然后跟着另一个 <div> 元素，这时它们的边距不会折叠。
浮动（Float）：当元素浮动时，它的边距不会与其他元素的边距合并。这是因为浮动元素被视为脱离正常文档流的元素。
内边距（Padding）：如果一个元素设置了内边距，它的边距不会折叠。内边距会在相邻元素的外边距折叠之前形成一个隔离层。
边框（Border）：如果一个元素有边框，它的边距不会与其他元素的边距合并。边框也会在相邻元素的外边距折叠之前形成一个隔离层。

示例说明

让我们通过一些示例来演示为什么简单的 CSS 边距没有发生合并。

示例一：兄弟元素的边距折叠

<style>
    .box {
        margin: 20px;
        background-color: lightgray;
    }
</style>

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

在上面的示例中，我们创建了两个相同的 <div> 元素，并给它们设置了相等的上下边距（margin）。你可能期望两个 <div> 元素之间的边距是相加的（40像素），但实际上只有一个边距生效。这是因为兄弟元素之间的边距会发生折叠，并且两个外边距中的较大值（20像素）被应用于它们之间。

示例二：父子元素的边距折叠

<style>
    .parent {
        background-color: lightgray;
    }

    .child {
        margin: 20px;
        background-color: lightblue;
    }
</style>

<div class="parent">
    <div class="child"></div>
</div>

在上面的示例中，我们创建了一个包含一个子元素的父元素。父元素没有设置内边距、边框或浮动，子元素设置了上下边距（margin）。你可能期望子元素的上下边距分别为20像素，但实际上只有一个边距生效。这是因为父子元素间的上下边距会发生折叠，并且两个外边距中的较大值（20像素）被应用于父元素与其他元素之间。