css两个margin重叠

在 CSS 中，当两个或者多个元素的边缘相遇时，它们的 margin 会发生重叠。如果你不了解 margin 重叠的话，这可能会让你感到困惑。

那么 margin 重叠到底是什么呢？当你有两个元素在垂直方向上相邻时，它们的 margin 会合并成为一个 margin。这个合并的 margin 的高度等于 margin 中最大的那个值。这可能会导致一些超预期的布局，它们看起来无法解释。

 .example {
        margin-top: 10px;
        margin-bottom: 20px;
    }
    .another-example {
        margin-top: 30px;
    } 

如果我们把这两个元素放在一起，我们会看到它们的 margin 重叠：

 <div class="example">
        <p>这是一个段落。</p>
    </div>
    <div class="another-example">
        <p>这也是一个段落。</p>
    </div> 

在这个例子中，我们可以看到第二个元素（class 为 .another-example）的 margin-top 和第一个元素（class 为 .example）的 margin-bottom 重叠了。它们的高度为 30px，而不是两个值之和 10px + 30px + 20px = 60px。

所以，我们需要特别注意 margin 重叠。如果你不希望出现这种情况，你可以使用 padding 或者 border 来避免。

希望这篇文章对你有所帮助！