外边距叠加

1.什么是外边距叠加？

在css中，两个和更多盒模型的相邻外边距将形成一个外边距，这个外边距的高度等于发生叠加的外边距中较大的一个。外边距的这种组合方式称为叠加，这样组合的外边距叫做叠加外边距。只有普通文档流中的块框的垂直外边距才会发生外边距叠加，行内框，浮动框或绝对定位框之间的外边距不会叠加。

2.外边距叠加的几种基本情形

(1)相邻元素

    相邻的外边距会发生叠加。但是根元素盒模型的外边距不会发生叠加

(2) 父元素与第一个/最后一个子元素

    如果块元素的 margin-top 与它的第一个子元素之间没有border, padding, inline content, 或 clearance 分隔，或者块元素的 margin-bottom 与它的最后一个子元素之间没有padding, inline content, height, min-height, or max-height 分隔，那么外边距会合并。

(3) 空块元素

    如果块元素 margin-top 与 margin-bottom 之间没有border, padding, inline content, height, 与min-height来分隔， 那么它的上下外边距合并。  

3.外边距叠加的结果

两个外边距叠加，叠加外边距的值为两个外边距中较大的一个。在出现负边距的情况下，叠加后的外边距为最大正外边距与最小负外边距之和。如果没有正外边距，则叠加的结果为最小外边距和0之和。