空白边叠加

 当两个垂直空白边相遇时，它们将形成一个空白边。这个空白边的高度是两个发生叠加的空白边的高度的较大者。

 当一个元素出现在另一个元素上面时，第一个元素的底空白边与第二个元素的顶空白边发生叠加，代码如下：

#topBox{
        width:100px;
        height:100px;
        margin:30px;      
}
#bottomBox{
         width:100px;
         height:100px;
         margin-top:20px;
         margin-left:30px;
}
//此处空白边为30px;

 

  当一个元素包含另一个元素时(假设没有填充或边框将空白边隔开)，它们的顶和底空白边也会发生叠加。

  只有普通文档流中块框底垂直空白边才会发生空白边叠加，行内框，浮动框或相对定位框之间的空白边是不会叠加的。