css中，水平方向上块级元素边距不会重合。垂直方向上，2个或2个以上的块级元素margin会叠加。
1.先看代码
/* html */
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
/* css */
div {
width: 100px;
height: 100px;
margin-left: 10px;
}
.div1 {
background: red;
margin-bottom: 100px;
}
.div2 {
background: green;
margin-top: 50px;
}
.div3 {
position: absolute;
width: 100px;
height: 100px;
top: 100px;
left: 100px;
background: blue;
}
图1
图一中红色和绿色方块垂直方向上的间距不是150px，而是等于蓝色方块的高度100px。
2.把红色方块的margin改为-100px或者绿色方块的margin改为 -150px。
图2
3.把红色方块的margin改为-100px，绿色方块的margin改为 -150px。
图3
总结
块级盒模型相邻的垂直margin会重叠。
margin计算方法：
1、全部都为正值，取最大值（图1）；
2、不全是正值，则都取绝对值，然后用正值减去最大值（图2）；
3、没有正值，则都取绝对值，然后用0减去最大值（图3）。
