简述CSS什么是外边距重叠？重叠的结果是什么？

CSS面试题 5月前 0 49

外边距重叠（Margin collapsing）是CSS中的一个特性，当两个垂直方向的外边距相遇时，它们会形成一个外边距。这个新形成的外边距的高度等于两个发生重叠的外边距的最大者，而不是它们的总和。

这种现象主要发生在以下三种情况：

相邻兄弟元素：当两个块级元素相邻（上下排列），且它们之间没有任何内容、padding或border分隔时，它们的垂直外边距会发生重叠。
父元素和第一个或最后一个子元素：如果一个块级元素的上外边距和其第一个子元素的上外边距，或者下外边距和其最后一个子元素的下外边距相遇，那么这两个外边距也会发生重叠。
空的块级元素：如果一个块级元素没有border, padding, inline content, height, 或者min-height，那么它的上外边距和下外边距就会发生重叠。

下面是一个例子：

<div style="margin: 20px; background: red;">
  <div style="margin: 30px; background: blue;"></div>
</div>

这个例子中，外部div的下边距和内部div的上边距相遇，它们会发生外边距重叠。重叠后的外边距为30px（两者之中较大的那个），而不是50px（两者之和）。