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;