CSS Margin 塌陷

Margin Collapse

垂直方向上，两个相邻的块级元素（或者父子元素）的margin会重叠，取较大值作为最终生效的margin，若有负的Margin则取绝对值最大的，正负抵消后计算。

相邻块级元素的 Margin 塌陷

div1的margin-bottom: 20px与div2的margin-top: 30px，则两个相邻的块级间距不是50px，而是30px。

<div style="margin-bottom: 20px">块1</div>
<div style="margin-top: 30px">块2</div>

父子元素的 Margin 塌陷

子元素margin穿透父元素，实际只有margin-top: 30px。

<div style="margin-top: 20px">
    <div style="margin-top: 30px">子元素</div>
</div>

解决方法

方法一

使用flex布局，gap属性保证元素间距。

方法二

BFC块级格式化上下文，使父元素独立布局，隔绝子元素margin。

对于父子元素的margin塌陷，在父元素中添加overflow: hidden，即可解决子元素margin穿透父元素。

方法三

相邻块级元素的margin塌陷，可以使用padding来解决。