外边距合并

下文大部分内容为从MDN margin collapsing拷贝粘贴，然后加上解释。

块级元素的上外边距和下外边距有时会合并（或折叠）为一个外边距，其大小取其中的最大者，这种行为称为外边距折叠（margin collapsing），有时也翻译为外边距合并。注意浮动元素和绝对定位元素的外边距不会折叠。

发生折叠的情况

相邻元素之间

毗邻的两个元素之间的外边距会折叠（除非后一个元素需要清除之前的浮动）。

父元素与其第一个或最后一个子元素之间
- 如果在父元素与其第一个子元素之间不存在边框、内边距、行内内容，也没有创建块格式化上下文、或者清除浮动将两者的 margin-top 分开；
- 或者在父元素与其最后一个子元素之间不存在边框、内边距、行内内容、height、min-height、max-height将两者的 margin-bottom 分开，那么这两对外边距之间会产生折叠。此时子元素的外边距会“溢出”到父元素的外面。

块格式化上下文

块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域

清除浮动

空的块级元素如果一个块级元素中不包含任何内容，并且在其 margin-top 与 margin-bottom 之间没有边框、内边距、行内内容、height、min-height 将两者分开，则该元素的上下外边距会折叠。

    <div style="margin: 100px;"></div>
    // margin-top + margin-bottom=100px;

一些需要注意的地方：

上述情况的组合会产生更复杂的外边距折叠。

即使某一外边距为0，这些规则仍然适用。因此就算父元素的外边距是0，第一个或最后一个子元素的外边距仍然会“溢出”到父元素的外面。
如果参与折叠的外边距中包含负值，折叠后的外边距的值为最大的正边距与最小的负边距（即绝对值最大的负边距）的和。

<div style="margin-top: -100px">
    <div style="margin-top: -50px">
        <p style="margin-top: 200px">This is a paragraph</p>
    </div>
</div>

最终结果为：200px + (-100px) = 100px;

如果所有参与折叠的外边距都为负，折叠后的外边距的值为最小的负边距的值。这一规则适用于相邻元素和嵌套元素。

<div style="margin-top: -100px">
    <div style="margin-top: -50px">
        <p style="margin-top: -200px">This is a paragraph</p>
    </div>
</div>

最终结果为：-200px;

水平不会出现合并的情况

解决此类问题的方法

打破合并条件

<div>
    <span style="visibility: hidden;">12</span>
    <p style="margin-top: 20px;">This is p.</p>
</div>

or
给父元素加padding/border等，总之逆着合并条件来。（border: 0等于没设置啊）

基于合并条件基础上实现想要的效果

外边距合并

外边距合并

发生折叠的情况

解决此类问题的方法

参考