理解margin collapse现象

空白边叠加现象：只发生在垂直方向上的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属性值发生叠加。

图示：