- 什么是外边距合并：
常规文档流中两块级元素的垂直方向外边距相邻（中间没有任何隔离物，如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，说明元素的上下外边距合并了。
- 消除外边距合并的方法
- 为父元素设置 BFC 或 padding 或 border
- 兄弟元素间设置 float 或 inline-block 或 absolute
网友评论