css外边距折叠塌陷

css外边距折叠塌陷

1. 什么是外边距折叠？

css的外边距折叠是指，毗邻的两个或多个外边距（margin）会合并成一个外边距。

毗邻的条件：
1.这两个或多个外边距没有被非空内容分隔开，如：border,padding,clear等
2.这些margin都处于普通流中

2. 发生折叠的情况

2.1 非浮动元素的情况

• 一般地，在不分隔的情况下，且没有高度限制，一个元素的margin-top与其第一个子元素的margin-top属性毗邻；其margin-bottom属性与其最后一个子元素的margin-bottom属性毗邻。
• 元素自身的 margin-bottom 和 margin-top 相邻时也会折叠。
• 外边距折叠只发生在垂直方向上，不存在左右外边距折叠。

2.2 存在浮动元素

存在浮动元素，inline-block元素，绝对定位元素的情况下，有这些属性的元素margin不会和其他元素的外边距折叠

3.外边距折叠下margin的计算

• 在margin都为正数的情况下，取margin最大的值作为最终margin值
• 都为负数时，取绝对值最大的作为最终margin值
• 一正一负时，取绝对值最大的负数与最大的正数相加
• 相邻的margin要同时计算，不能分布计算