css中的外边距重叠问题

css中的外边距重叠

在css中元素间相邻的垂直方向的外边距会发生重叠，这里记录下外边距重叠的几种情况和解决外边距重叠问题的几种方法。

一、兄弟元素间的外边距重叠

如果外边距为正值，兄弟元素间的相邻垂直外边距会取两者间的较大值。
如果外边距一正一负，取两者的和。
如果都为负值，取两者中绝对值较大的一个。

兄弟元素间的外边距重叠一般情况下不处理。

二、父子元素间的外边距重叠

当给子元素设置一个外边距时，子元素的外边距会传递给父元素，容易影响到页面布局，此时需要对这种情况进行处理。

处理方式如下：
1、不使用外边距，用padding设置内边距。会改变父元素可见框的大小，需要重新计算父元素的height或是设置box-sizing: border-box;；

2、为元素设置边框使两者的外边距不相邻。同样设置边框会改变元素大小，需要重算height或者设置box-sizing：border-box;；

3、为父元素开启BFC（块级格式化环境），元素在开启BFC后，子元素与父元素外边距不会发生重叠。

4、使用::before伪元素选择器和display:table来解决外边距重叠问题。

5、clearfix类 常用于同时解决高度塌陷和外边距重叠问题。

6、为子元素开启绝对定位，并为父元素开启相对/绝对定位(目的是使父元素作为子元素的包含块)。