css 关于空白叠加

CSS中的空白叠加（Margin Collapse）通常是指当相邻的两个元素之间存在空白（margin/padding/border）时，它们之间的空白会按照一定规则合并，而不是简单地叠加。

通常情况下，当两个同级元素上下相邻时，它们之间的垂直方向的外边距会合并，结果等于两个外边距中的较大值。但有一些情况下，外边距不会进行合并。

现在，我们来看两个不同的示例，以加深对CSS空白叠加的理解。

示例一

在HTML中，有两个块元素div和p，并且它们是父子关系。div的上下外边距分别为30px和30px，p的上下外边距分别为20px和40px。实际上，div和p之间的外边距最终只会计算一次，而不是按照遇到每个外边距都计算一次。

<div style="margin: 30px 0;">
  <p style="margin: 20px 0 40px;">示例1</p>
</div>

这个示例中，div和p之间的30px和20px样式值会进行合并，最终的外边距是30px。p的底部40px的外边距不会和div的外边距合并，因为它不是垂直相邻的元素（中间隔了一个块级父元素）。

示例二

这个示例中有两个相邻的div元素，它们的上下边距的值分别是20px和30px。

<div style="margin-bottom: 20px;">
  <div style="margin-top: 30px;">示例2</div>
</div>

这个示例中，相邻的两个div元素之间的垂直方向的外边距不会进行合并，而是会分别计算，结果分别是20px和30px。

除了垂直相邻的元素外，和定位、浮动、inline-block等特殊情况下，外边距也不会进行合并。因此，对于margin-collapse的问题，我们应该认真分析每个元素的容器链，以提前预知和避免这个问题。