原文链接:

外边距折叠

外边距折叠问题

外边距折叠的概念

在CSS中，两个或多个

毗邻

的

普通流

中的盒子（可能是父子元素，也可能是兄弟元素），在

垂直方向

上的外边距会发生叠加，这种形成的外边距称为外边距叠加。

普通流概念：

只要不是float、absolute、root element时就是普通流。

外边距折叠的产生条件

*都属于普通流的块级盒子且都参与到相同的块级格式化上下文中；

*没有被padding、border、clear和line box 分隔开

*都属于垂直毗邻盒子边缘；

（1）盒子的top margin和它的第一个普通流子元素的top margin

（2）盒子的bottom margin和它的下一个普通流兄弟的top margin

(3) 盒子的bottom margin和它父元素的bottom margin

(4) 盒子的top margin和bottom margin，且没有创建一个新的块级格式上下文，且有被计算为0的min-height，被计算为0或auto的height，且没有普通流子元素

外边距折叠的结果

1.如果外边距都为正数，折叠结果为大的正数；

2.如果外边距一个为正数一个为负数，折叠结果为最大正边距和最小负边距的和；

3.如果外边距都为负数，折叠结果为最小负边距的值；

如何避免外边距折叠

避免外边距折叠的方法：

1.给父元素添加border

2.给父元素增加padding

3.父子元素之间添加触发BFC的元素