外边距重叠-css冷知识

外边距重叠就是 margin-collapse。相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。 这种合并外边距的方式被称为折叠，结合而成的外边距称为折叠外边距

折叠结果遵循下列计算规则：

两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值

两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值

两个外边距一正一负时，折叠结果是两者的相加的和

怎么避免外边距折叠（怎么消除）来源知乎问答:如何解决外边距叠加的问题？

浮动元素、inline-block 元素、绝对定位元素的 margin 不会和垂直方向上其他元素的 margin 折叠（注意这里指的是上下相邻的元素）

创建了块级格式化上下文的元素，不和它的子元素发生 margin 折叠（注意这里指的是创建了BFC的元素和它的子元素不会发生折叠。 我们都知道触发BFC的因素是float（除了none）、overflow（除了visible）、display（table-cell/table-caption/inline-block）、position（除了static/relative） 很明显大家可以看出来相邻元素不发生折叠的因素是触发BFC因素的子集，也就是说如果我为上下相邻的元素设置了overflow:hidden，虽然触发了BFC，但是上下元素的上下margin还是会发生折叠。 这个问题其实和BFC并没有太大的关系，希望大家不要滥用BFC，要知道BFC不是全能，创建BFC的初衷只是为了让元素本身（包括它的子元素）能够正确的计算自己的宽高。

zoom，这是IE浏览器最初支持的缩放属性，到现在只有最新的webkit核心的浏览器也支持。但只是在IE8以下的浏览器下才可成功触发hasLayout，对于非IE浏览器也是没有效果的，所以还是需要同样的去创建BFC。

关于最终如何解决这样的问题，我的建议是在写的时候尽量用同一方向的margin，比如都设置为top或者bottom，因为你在实践的时候有时不需要为每个元素设置浮动、inline-block或者absolute 。

参考资料

MDN:外边距合并