浅谈外边距的叠加

简单来说，当两个或更多垂直外边距相遇时，他们会合并成一个外边距。这个合并外边距的大小为相遇两垂直外边距中较大的那个。

外边距叠加的条件

1. 只有普通文档流中块级元素的垂直外边距才会发生外边距叠加。行内框，浮动框与绝对定位框之间的外边距不会叠加。
2. 两元素必须相毗邻（没有被内边距、边框以及任何东西隔开）,这也就意味着在普通流中，父元素与其第一个子元素只会margin-top相邻，而其margin-bottom值不相邻。

如何解决外边距叠加问题

如果你想问如何才能使外边距不发生叠加(～﹃～)~zZ
详情请看上一条如何才能发生叠加，有一条不符合即可。

垂直外边距叠加

当两个元素垂直相毗邻时，上面元素的margin-bottom与下面元素的margin-top会发生叠加。（两元素之间的垂直margin间隔会取其中较大的）

内外外边距叠加

当一个元素在另一个元素内部，他们的margin-top/bottom会发生叠加。具体为
1. 父元素与其内部第一个子元素会发生margin-top叠加，margin-top值会取两者较大的并且只会作用于父元素。
2. 只有在父元素的height值为auto时，其与最后一个子元素的margin-bottom值会发生叠加，同样叠加效果作用于父元素。

与自己发生叠加

假设有一个空元素，它有外边距，但是没有边框或内边距。在这种情况下，它的margin-top与margin-bottom就碰到了一起，那么它的顶和底外边距就会发生叠加。