外边距合并

2016-10-17 本文已影响0人 __Qiao

什么是外边距合并：
常规文档流中两块级元素的垂直方向外边距相邻（中间没有任何隔离物，如border，padding）时，会出现垂直方向外边距合并。
合并结果：

相邻兄弟元素外边距合并
相邻兄弟元素垂直方向外边距会出现合并
父子元素外边距合并
当父元素没有边框或padding时，父元素的垂直外边距会与子元素的垂直外边距合并，如下图所示
非兄弟非父子元素外边距合并
两相邻非兄弟元素之间没有padding或边框等间隔时，会出现外边距合并，如下图所示
自身外边距合并
当元素的content为0时，他自己的margin-top、margin-bottom之间没有间隙，会产生合并

如上图所示，元素的实际高度=margin-top+margin-bottom+border-top+border-bottom+padding-top+padding-bottom+height，上下margin各为45px，元素的高度应为90px，但图中元素高度只有45px，说明元素的上下外边距合并了。