时间：2021-07-01 10:21:17 帮助过：18人阅读
只有上外边距和下外边距才会触发外边距合并，左外边距和右外边距不会。外边距合并都是基于以下三种基本的外边距合并。
我们考虑两个连续的 div，他们的上下左右的边距都是 50px。此时，第一个区域的下外边距 和 第二个区域的上外边距 合并，故他们的间隔是 50px。
第一个子元素的上外边距和父元素的上外边距会进行合并
最后一个子元素的下外边距和父元素的下外边距会进行合并
合并的视觉效果就是这些合并的外边距 表现为父元素的外边距。
我们使用一个有颜色区域包含另外一个不同颜色的区域。里面的区域所有的外边距设为50px。
我们可以看到， margin-box 的左边和右边都展示为 #cccdd1, 而由于上边和下边的外边距和父元素的合并了，并表示为父元素的外边距，故颜色为父元素的父元素的背景色（若又发生合并，递推即可）。
细心的读者会发现，我并没有设置父元素的 margin，何来合并一说？
这是因为当 margin 为 0 的时候也会发生合并。
它自己的上外边距和下外边距合并了。°(°?Д?°) °
设置 overflow: hidden;（不为 visible 都可）。
由于 margin 需要直接接触才能够合并，根据盒子模型，我们可以设置父元素的 边框 或 内边距，或者使用某些元素将第一个元素和父元素隔开（那就不是第一个元素了）。
只有在静态流的元素才会发生外边距合并，故设置 float, position: absolute; 都可以使得外边距在何种情况都不合并。
inline-block 是个例外，它既没有脱离文档流，但是它的所有的外边距都不会合并。
听说技术文章和 DEMO 更配噢～
git clone https://github.com/JasonKid/fezone.git 搜索 Margin Collapsing
记得点赞... (??□′)?? ┴─┴