css外边距合并和塌陷问题

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并

---

相邻(兄弟)块元素垂直外边距的合并

当上下两个块元素(兄弟关系)相遇时，如果上面的元素有下外边距 margin-bottom,下面的元素有上外边距 margin-top 的时候，他们之间的垂直间距不是 margin-bottom 和 margin-top 之和。他们之间的距离为取两个值里面的较大者

解决方案：尽量只给一个盒子添加margin

注意：只有普通文档流中块元素的垂直外边距才会发生外边距合并。行内元素、浮动元素或绝对定位之间的外边距不会合并。

解决方法：

1. 只给其中一个元素增加外边距，既然想要两个盒子的距离为40px，那么就直接让上面的盒子的下边距为40px或者让下面的盒子的上边距为40px(推荐)

2. 使用浮动，给下面的元素增加浮动，使其脱离文档流就可以了

注意：不要给第一个元素增加浮动，否则第一个元素脱离文档流，第二个元素会自动填补，二者可能会重叠

     3.给下面的元素使用定位，使其脱离文档流就可以了，原理和浮动一样。

注意：position的值只能是absolute绝对定位和fixed固定定位

      4.将其中一个元素变为行内块元素

使用 display: inline-block;属性将其中一个元素变为行内块元素就可以了

display的很多属性值都可以解决外边距合并问题，常用的就是 inline-block flex或 inline-flex

     5.给其中一个元素增加一个父元素，给父元素添加overflow：hidden样式

这样会使兄弟元素不在同一个BFC区域下，这个元素就可以看做成隔离了的独立容器。容器内的元素不会影响容器外的元素

     6.给其中一个元素增加一个父元素，给父元素添加一个边框

     7.给其中一个元素增加一个父元素，给父元素增加内边距

嵌套(父子)块元素垂直外边距的塌陷

对于两个嵌套关系(父子关系)的块元素，如果父子元素都有上边距，此时父元素会塌陷较大的外边距值(也就是哪个的外边距大，父元素的外边距就会变成哪个)

同时满足下面条件条件就会产生外边距塌陷问题：

• 子元素在父元素里面

• 子元素有margin-top或margin-bottom值

解决方案：

1. 为父元素定义上边框

2. 为父元素定义内边距

3. 为父元素添加 overflow：hidden

4. 给父元素或子元素添加浮动，让其脱标

5. 将父元素转换成行内块元素，display：inline-block；

6. 给父元素或者子元素添加定位，原理也是让其脱标，不过只能使用绝对定位和固定定位。

7. 给父盒子添加  flex或者  inline-flex

还有其他方法，比如浮动，固定，绝对定位的盒子不会发生塌陷