margin上边距下边距覆盖

首先，我们知道水平间距不会重合覆盖

但是，两个或多个块级盒子的垂直相邻边界会重合。

边界宽度结果的如下：

• 如果都是正值：相邻边界宽度中最大的值。

• 如果有一个负值：在最大的正边界中减去绝对值最大的负边界。

• 如果都是负值：从零中减去绝对值最大的负边界。

但是，事有例外，下面不会重叠：

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

• 相邻的盒模型中，如果其中的一个是浮动的（float），垂直margin不会重叠，并且浮动的盒模型和它的子元素之间也是这样

• overflow 不为默认值visible， 设置其他属性的元素和它的子元素之间的margin不会被重叠

• 设置了绝对定位 absolute和 display: inline-block 的盒模型，垂直margin不会被重叠，并且和他们的子元素之间也是一样

为此，我们找到了防止外边距重叠解决方案：

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

• 外层元素padding代替

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

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

• 外层元素 overflow: hidden;

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

• 内层元素padding: 1px;