盒模型的外边距叠加

有时候在使用margin-top或者margin-bottom时，发现加上去的margin-top或者margin-bottom值不起作用了，其中的原因有可能就是发生了外边距叠加。这在普通文档流中经常会出现。行内框，浮动框，或者绝对定位框之间的外边距不会发生叠加。

外边距叠加只会发生在垂直的top或者bottom边距，left或者right边距不会发生这种情况。

以下就是发生这种边距叠加的几种情形：

1. 当一个元素出现在另外一个元素的上面的时候，上面元素的margin-bottom和下面元素的margin-top会产生叠加，叠加后二者的垂直距离就是margin-top/margin-bottom中的大值。
2. 一个元素被包含在另一个元素中的时候，子元素和父元素的垂直margin会产生叠加，效果也是叠加后与其他元素的距离取大的数值。
3. 一个元素如果是空的，那么它的margin-top和margin-bottom也会产生叠加。叠加以后如果上面下面仍有其他的边距的时候也会产生叠加。