在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合

合并外边距的场景：

• 外边距合并的必备条件：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