CSS外边距(margin)叠加详解

        以前一直都不知道CSS外边距会有叠加的情况，知道最近才知道有这么一个概念。以下文章是从5idev.com转载过来。

        外边距叠加是指两个垂直相邻的块级元素，当上下两个边距相遇时，起外边距会产生叠加现象，且叠加后的外边距，等于其中较大者。 图示： 

另一个叠加现象是当一个元素包含在另一个元素之中时，子元素与父元素之间也会产生叠加现象，叠加后的外边距，等于其中最大者： 

同理，如果一个无内容的空元素，其自身上下边距也会产生叠加。 

外边距叠加的意义

        外边距的叠加只产生在普通流文档的上下外边距之间，这个看起来有点奇怪的规则，其实有其现实意义。设想，当我们上下排列一系列规则的块级元素（如段落P）时，那么块元素之间因为外边距叠加的存在，段落之间就不会产生双倍的距离。 

防止外边距叠加

        虽然外边距的叠加有其一定的意义，但有时候我们在设计上却不想让元素之间产生叠加，那么可以有如下几个建议可供参考： 

1. 尽量使用padding来达到目的

2. 在可能叠加的外边距之间添加透明边框或者内边距使之分隔开

3. 给元素添加上浮动(float)属性

4. 在可能叠加的元素间添加空的块元素