外边距合并

块级元素的上外边距和下外边距有时会合并成一个外边距，其大小取其最大，我们称为外边距合并（或外边距折叠），注意浮动元素和绝对定位元素的外边距不会折叠。
外边距合并主要有三种情况：

1. 相邻元素之间

   
   1.jpg

2. 父元素于其第一个或者最后一个子元素之间

   
   2.jpg

3. 空的块级元素

   
   3.jpg

而根据w3c规范，两个margin是邻接的必须满足以下条件：

• 必须是处于常规文档流（非float和绝对定位）的块级盒子,并且处于同一个BFC当中。

• 没有padding和border将他们分隔开

• 都属于垂直方向上相邻的外边距，可以是下面任意一种情况

• 元素的margin-top与其第一个常规文档流的子元素的margin-top

• 元素的margin-bottom与其下一个常规文档流的兄弟元素的margin-top

• height为auto的元素的margin-bottom与其最后一个常规文档流的子元素的margin-bottom

• 高度为0并且最小高度也为0，不包含常规文档流的子元素，并且自身没有建立新的BFC的元素的margin-top和margin-bottom

以上的条件意味着下列的规则：

• 创建了新的BFC的元素（浮动，绝对定位，以及各种产生BFC的操作），与它的子元素的外边距不会折叠
• inline-block元素不与任何元素的外边距产生折叠（不是块元素）
• 一个常规文档流元素的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 折叠。
• 一个不包含border-top、border-bottom、padding-top、padding-bottom的常规文档流元素，并且其 'height' 为 0 或 'auto'， 'min-height' 为 '0'，其里面也不包含行盒(line box)，其自身的 margin-top 和 margin-bottom 会折叠。

减少外边距合并操作

最实用的方法是尽量都使用margin-top或者margin-bottom，或者选择副作用最小方式