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;