关于margin叠加问题

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

    1.发生外边距叠加的情况

    外边距(margin)重叠示例

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

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

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

    2如何解决:

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

    2.2内层元素透明边框 border:1px solid transparent;

    2.3内层元素绝对定位 postion:absolute:

   2.4外层元素 overflow:hidden;

   2.5内层元素 加float:left;或display:inline-block;

  2.6内层元素padding:1px;

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