css外边距合并问题

什么是外边距叠加

在css中，两个或多个毗邻的普通流中的盒子（可能是父子元素，也可能是兄弟元素）在垂直方向上外边距会发生叠加，这样形成的外边距称之为外边距叠加。
关键字：毗邻，两个或多个，垂直方向，普通流。

毗邻

说明了盒子之间的位置关系，没有被padding，border分割开。

垂直方向

只有垂直方向的外边距会发生外边距叠加，水平方向的外边距不存在叠加的情况。

普通流（文档标准流）

css中有文档标准流（普通流）和脱离文档流之分。

文档标准流

简单来说标准流就是浏览器按照各种元素标签排版布局中默认的状态，浏览器在渲染代码的时候是从左往右，从上往下开始渲染，元素也是从左往右，从上往下的流逝式排列。也就是没有被其它排版浮动和定位相关的css属性干扰的就叫标准流。

脱离文档流

浮动和定位。

什么时候会发生外边距叠加

两种情况：父子外边距叠加，兄弟外边距叠加。

解决外边距叠加

兄弟外边距叠加

只给一个盒子设置外边距

父子外边距叠加

• 给子元素，或者父元素设置浮动
• 父元素使用overflow：hidden；触发BFC
• 给子元素或者父元素使用绝对定位
• 给父元素设置内边距
• 给父元素设置边框

参考：

解决方法
叠加原理