合并外邊距的場景：

• 外邊距合并的必備條件：margin必須是鄰接的

• 兩個margin是鄰接的必需滿足以下條件：

1、必須是處于常規(guī)文檔流（非float和絕對定位）的塊級盒子，并且處于同一個BFC當中

2、沒有線盒，沒有空隙，沒有padding和border將他們分隔開

3、都屬于垂直方向上相鄰的外邊距，可以是下面任意一種情況：

<1>:元素的margin-top與其第一個常規(guī)文檔流的子元素的margin-top

<2>:元素的margin-bottom與其下一個常規(guī)文檔流的兄弟元素的margin-top

<3>:height為auto的元素的margin-bottom與其最后一個常規(guī)文檔流的子元素的margin-bottom

<4>:高度為0并且最小高度也為0，不包含常規(guī)文檔流的子元素，并且自身沒有建立斤的BFC的元素的margin-top和margin-bottom

合并規(guī)則:

• 一個常規(guī)文檔流元素的margin-bottom與它下一個常規(guī)文檔流的兄弟元素的margin-top會合并，除非它們之間存在clearance

• 一個常規(guī)文檔流元素的margin-top與其第一個常規(guī)文檔流的子元素的margin-top產(chǎn)生合并，條件為父元素不包含padding和border,子元素不包含clearance

• 一個’height’為’auto’并且’min-height’為0的常規(guī)文檔流元素的margin-bottom會與其最后一個常規(guī)文檔流子元素的margin-bottom合并，條件為父元素不包含padding和border,子元素的margin-bottom不與保護clearance的margin-top合并

• 一個不包含boder-top、border-bottom、padding-top、padding-bottom的常規(guī)文檔流元素，并且其’height’為0或’auto’,’min-height’為’0’,其里面也不包含line box,其自身的margin-top和margin-bottom會合并

• 創(chuàng)建了新的BFC的元素（例如浮動元素或者’overflow’值為’visible’以外的元素）與它的子元素的外邊距不會合并

• 浮動元素不與任何元素的外邊距產(chǎn)生合并（包括其父元素和子元素）

• 絕對定位元素不與任何元素的外邊距產(chǎn)生合并

• inline-block元素不與任何元素的外邊距產(chǎn)生合并

合并后margin計算規(guī)則

• 兄弟元素

image.png

• 父子元素

image.png

• 空元素

image.png

• 以上三種混合

image.png

父子外邊距合并范例

image