浅谈外边距的叠加

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

外边距叠加的条件

只有普通文档流中块级元素的垂直外边距才会发生外边距叠加。行内框，浮动框与绝对定位框之间的外边距不会叠加。

两元素必须相毗邻（没有被内边距、边框以及任何东西隔开）,这也就意味着在普通流中，父元素与其第一个子元素只会

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

就碰到了一起，那么它的顶和底外边距就会发生叠加。