空白边叠加现象：只发生在垂直方向上的block元素(如p,h1,div等)。float,inline(如strong,span)以及绝对定位元素不受影响。
1.包含关系：
<div class="outer">
<div class="inner">inner</div>
</div>
.inner{
width:100px;height:100px;background-color:#666;
margin-top:20px;
}
.outer{
width:200px;height:200px;background-color:#ccc;
/*border: 1px solid black;*/
padding-top:20px;
}两个直接的DIV嵌套margin属性会发生叠加，结果为高度大的起作用。（事实上，如果中间有内容存在，该内容将默认被理解为匿名块元素，关系的定位就是该匿名块与它直接接触的块元素了。）
解决方法：
1.为outer DIV 添加borer
2.为outer DIV 在叠加方向上添加padding。
2.相邻关系：
<div class="div1">div1</div>
<div class="div2">div2</div>
div1 的margin-bottom 将会与 div2的margin-top属性值发生叠加。
图示：
