理解margin collapse现象

[b]空白边叠加现象[/b]：只发生在垂直方向上的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属性会发生叠加，结果为高度大的起作用。（事实上，如果中间有内容存在，该内容将默认被理解为匿名块元素，关系的定位就是该匿名块与它直接接触的块元素了。）
[b] 解决方法：[/b]
1.为outer DIV 添加borer
2.为outer DIV 在叠加方向上添加padding。

[b]2.相邻关系：[/b]
<div class="div1">div1</div>
<div class="div2">div2</div>

div1 的margin-bottom 将会与 div2的margin-top属性值发生叠加。

图示：

[img]http://dl.iteye.com/upload/attachment/296207/d36c22be-f9f5-348a-a9a7-a2b86114196a.bmp[/img]

[img]http://dl.iteye.com/upload/attachment/296209/45f66084-7d9e-3a04-8916-9ff58661b1b5.bmp[/img]