“margin塌陷” 嵌套盒子外边距合并现象

来源于官方文档对于外边距合并的解释：

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

 

出现外边距塌陷的三种情况：

　　1.相邻兄弟元素之间

　　　　若两者都为正外边距以最大的外边距为准；

　　　　若存在负边距， 合并后的外边距为最大正外边距减去绝对值最大的负边距；

　　　　若无正外边距，则用0减去绝对值最大负边距。

　　2.父元素与第一个/最后一个子元素之间

　　　　如果块级元素的 margin-top/margin-bottom 与它的第一个/最后一个子元素的margin-top/margin-bottom 之间没有 border、padding、inline content 等来分隔，此时外边距会塌陷，子元素多余的外边距会被父元素的外边距截断。

　　3.自身合并

　　　　假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并：

　　　　

　　　　如果这个外边距遇到另一个元素的外边距，它还会发生合并：

　　　　

 

解决margin塌陷的几种方法：　

　　1.在父级加入overflow：hidden；

　　2.在父级用padding-top；

　　3.在父级加position：absolute；

　　4.border:1px solid transparent;

　　5.float:left/right

　　6.display:inline-block

 

参考资料：http://www.w3school.com.cn/css/css_margin_collapsing.asp；

　　　　　http://www.ayqy.net/doc/css2-1/box.html#collapsing-margins；