详解css外边距合并

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

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

外边距合并的前提

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

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

1. 一个元素出现在另一个元素上面时
2. 一个元素包含另一个元素时(没有内边距或边框把它们的外边距分开)
3. 一个没有内边距和边框的空元素,它的上、下外边距相遇也会合并
4. 上述3中空元素的外边距遇到另一个元素的外边距,3个外边距发生合并

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

外边距合并的兼容性

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

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

更多CSS相关:css外边距合并css spritescss background属性css font属性css命名规则

mming原创,转载请保留链接: http://www.mming.cc/blog/?p=595