合并外边距的场景：
-
外边距合并的必备条件：margin必须是邻接的
-
两个margin是邻接的必需满足以下条件：
1、必须是处于常规文档流（非float和绝对定位）的块级盒子，并且处于同一个BFC当中
2、没有线盒，没有空隙，没有padding和border将他们分隔开
3、都属于垂直方向上相邻的外边距，可以是下面任意一种情况：
<1>:元素的margin-top与其第一个常规文档流的子元素的margin-top
<2>:元素的margin-bottom与其下一个常规文档流的兄弟元素的margin-top
<3>:height为auto的元素的margin-bottom与其最后一个常规文档流的子元素的margin-bottom
<4>:高度为0并且最小高度也为0，不包含常规文档流的子元素，并且自身没有建立斤的BFC的元素的margin-top和margin-bottom
合并规则:
-
一个常规文档流元素的margin-bottom与它下一个常规文档流的兄弟元素的margin-top会合并，除非它们之间存在clearance
-
一个常规文档流元素的margin-top与其第一个常规文档流的子元素的margin-top产生合并，条件为父元素不包含padding和border,子元素不包含clearance
-
一个’height’为’auto’并且’min-height’为0的常规文档流元素的margin-bottom会与其最后一个常规文档流子元素的margin-bottom合并，条件为父元素不包含padding和border,子元素的margin-bottom不与保护clearance的margin-top合并
-
一个不包含boder-top、border-bottom、padding-top、padding-bottom的常规文档流元素，并且其’height’为0或’auto’,’min-height’为’0’,其里面也不包含line box,其自身的margin-top和margin-bottom会合并
-
创建了新的BFC的元素（例如浮动元素或者’overflow’值为’visible’以外的元素）与它的子元素的外边距不会合并
-
浮动元素不与任何元素的外边距产生合并（包括其父元素和子元素）
-
绝对定位元素不与任何元素的外边距产生合并
-
inline-block元素不与任何元素的外边距产生合并
合并后margin计算规则
- 兄弟元素
image.png
- 父子元素
image.png
- 空元素
image.png
- 以上三种混合
image.png
父子外边距合并范例
image
网友评论