css外边距margin重叠及其解决方法

       在实际工作中，我们会发现，垂直的两个块元素若设置了margin元素，则会重叠。

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

     一、边界叠加情况

     1、底边界与顶边界叠加

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

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

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

      

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

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

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

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

   

     二、叠加原因

       在规范文档中，2个或以上的块级盒模型相邻的 垂直margin会重叠（ 水平边距永远不会重合）。最终的margin值计算方法如下：

1. 全部都为正值，取最大者；
2. 不全是正值，则都取绝对值，然后用正值减去最大值；
3. 没有正值，则都取绝对值，然后用0减去最大值。

        注意：相邻的盒模型可能由DOM元素动态产生并没有相邻或继承关系

      三、解决方法

1. 外层元素padding代替
2. 内层元素透明边框 border:1px solid transparent;
3. 内层元素绝对定位 postion:absolute:
4. 外层元素 overflow:hidden;
5. 内层元素 加float:left;或display:inline-block;
6. 内层元素padding:1px;

         以上整理自：

        http://developer.51cto.com/art/201008/221940_1.htm

        http://www.hujuntao.com/web/css/css-margin-overlap.html