margin叠加原理

margin 叠加是什么？就是当垂直外边距相遇时，它们将叠加，叠加的高度取较大的。下面按各种情况及附图来说明。

当一个元素出现在另一个元素上面时，第一个元素的底边界与第二个元素的顶边界发生叠加，如图：

元素的顶边界与前面元素的底边界发生叠加。

 

当一个元素包含在另一个元素中时（假设没有填充或边框将边界分隔开），它们的顶和/或底边界也发生叠加，如图：

元素的顶边界与父元素的顶边界发生叠加。

尽管初看上去有点儿奇怪，但是边界甚至可以与本身发生叠加。假设有一个空元素，它有边界，但是没有边框或填充。在这种情况下，顶边界与底边界就碰到了一起，它们会发生叠加，如图：

元素的顶边界与底边界发生叠加。

如果这个边界碰到另一个元素的边界，它还会发生叠加，如图：

空元素中已经叠加的边界与另一个空元素的边界发生叠加。

 

边界叠加初看上去可能有点儿奇怪，但是它实际上是有意义的。以由几个段落组成的典型文本页面为例。第一个段落上面的空间等于段落的顶边界。如果没有 边界叠加，后续所有段落之间的边界将是相邻顶边界和底边界的和。这意味着段落之间的空间是页面顶部的两倍。如果发生边界叠加，段落之间的顶边界和底边界就 叠加在一起，这样各处的距离就一致了，如图：

边界叠加在元素之间维护了一致的距离。

margin 叠加只发生在普通文档流中块框的垂直，行内框、浮动框或绝对定位框之间的边界不会叠加。

margin 叠加虽然是合理的，但如果处理不当，会产生不期望的效果，解决的办法有以下几种：

1. 用外元素的 pading 代替元素的 margin；
2. 给外元素加透明边框，即：border:1px solid transparent; 也就是有分隔的时候不会产生 margin 叠加；
3. 元素绝对定位；
4. 外元素设置 overflow:hidden；
5. ……

转载于:https://www.cnblogs.com/piuba/archive/2012/12/12/2815032.html