CSS外边距塌缩（margin collapse）
外边距塌缩（margin collapse），外边距塌缩只发生在 block元素 的垂直方向。
为什么要塌缩？
以前是为了解决多文本段落的最后一行排版问题，设想有多个p元素，我们给p加了margin-top:10px, 最后一个p元素的外边距的设定会是特殊的（末尾会短些）。所以CSS规范就引入了个这么个奇葩的规则。当然现在其实有很多方法能解决这个问题，而无需塌缩，但考虑到广泛的兼容性，事实上这个规则是很难改了。
如何避免塌缩？
如果有padding或者有border或者设置了position: absolute等等，则塌缩不起作用。
一个最简单的规避小技巧就是给父元素加一个padding: 0.05px。
参考：
浙公网安备 33010602011771号