当两个垂直空白边相遇时，它们将形成一个空白边。这个空白边的高度是两个发生叠加的空白边的高度的较大者。
当一个元素出现在另一个元素上面时，第一个元素的底空白边与第二个元素的顶空白边发生叠加，代码如下：
#topBox{
width:100px;
height:100px;
margin:30px;
}
#bottomBox{
height:100px;
width:100px;
margin-top:20px;
margin-left:30px;
}
//此处空白边的高度为30px;
当一个元素包含另一个元素时(假设没有填充或边框将空白边隔开)，它们的顶和底空白边也会发生叠加。
只有普通文档流中块框底垂直空白边才会发生空白边叠加，行内框，浮动框或相对定位框之间的空白边是不会叠加的。
原文：http://www.cnblogs.com/lzl1103/p/6645478.html