css 纵向合并_详解css外边距合并

什么是外边距合并(合并垂直外边距)

当两个垂直外边距(margin)相遇时，将形成一个外边距。合并后的高度为这两个外边距中高度值较大者。

外边距合并的前提

只有普通文档流中的块框垂直外边距才会发生合并。

行内框、浮动框或绝对定位之间的外边距不会合并。

外边距合并的几种情况(查看DEMO)

1. 一个元素出现在另一个元素上面时

2. 一个元素包含另一个元素时(没有内边距或边框把它们的外边距分开)

3. 一个没有内边距和边框的空元素，它的上、下外边距相遇也会合并

4. 上述3中空元素的外边距遇到另一个元素的外边距，3个外边距发生合并

根据demo5、6的结果，基于上述4的情况，4个外边距、n个空元素也同样会发生外边距合并。

外边距合并的兼容性

从上图可以看出，本例DEMO在各浏览器下表现一致(opera的效果是由于元素高度不一，可能是line-height引起，而实际测量margin值与其它浏览器完全一致)。

由于“只有普通文档流中的块框垂直外边距才会发生合并”，根据本例是否就可以说明“外边距合并在各浏览器中不存在兼容性问题”？不排除在其它情况下浏览器会有不同表现，希望可以就此和大家一起交流讨论。