外边距折叠（Margin collapsing）笔记?

定义

外边距折叠是指有时候上边距与下边距坍缩成较大的那一个边距的行为。它只会发生在同一BFC的块级元素间，并且永远不会发生在浮动元素或绝对定位元素间。

可能的情况

毗邻的兄弟元素

相邻的兄弟元素垂直边距会发生折叠，但最后一个元素需要清除浮动时例外。

父元素和第一个/最后一个子元素

父元素与第一个子元素的margin-top可能重合，与最后一个子元素的margin-bottom可能重合。

如果要在这种情况下避免外边距折叠，请将两者的margin区分开。区分margin-top的方法有设置border、padding、inline content、清除浮动、避免创建BFC区域。区分margin-top的方法还有设置height、min-height、max-height。

空区块

如果一个块级元素没有border、padding、inline content（行内内容）、height或者min-height将其与其他元素分开，这个块级元素的margin将会被折叠。

演示

<p style="margin:4px 0 10px 0;background:yellow">下面的间隙是10px</p>
<p style="margin:4px 0 10px 0;background:yellow">上面的间隙是10px</p>

<div style="margin:16px 0 ;background:grey">
上面的间隙是16px，下面的间隙是4px
<p style="margin:4px 0 10px 0;background:yellow">下面的间隙是10px</p>
<p style="margin:4px 0 10px 0;background:yellow">上面的间隙是10px</p>
</div>

HTML演示

MDN：https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing