外边距叠加

外边距叠加是指有时两个块级元素的top margin或bottom margin会合并成一个margin

在分析外边距叠加的情况之前先了解一下block formatting context(块级格式化上下文)。可参考简书上的资料http://www.jianshu.com/p/66632298e355

以下元素会生成BFC

• 根元素
• float属性不为none
• position为absolute或fixed
• display为inline-block, table-cell, table-caption, flex, inline-flex
• overflow不为visible( hidden,scroll,auto)

情况一：兄弟元素

当有负值时，元素的间隔距离是两个margin(正和负之和)的和。

情况二：父元素和第一个子元素或者父元素和最后一个子元素

父元素和第一个子元素之间没有父元素的border-top，padding-top，其他的行内文本和新产生的BFC分隔开。 父元素和最后一个子元素之间没有父元素的border-bottom，padding-bottom,其他的行内文本，父元素的height,min-height,max-height分隔开。

情况三：空的块级元素。

如果一个块级元素设置了上下margin，但是没有设置border,padding,行内文本，height,min-height来分隔上下margin

下面设置了一个空的div，并设置了margin:20px;在审查元素中可以看到，上下margin合并

更多种情况是当以上几种情况一起出现时。