合并外边距的场景:
外边距合并的必备条件: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计算规则
兄弟元素
父子元素
空元素
以上三种混合
父子外边距合并范例