CSS教程系列八——空白边的叠加

上节我们刚学了CSS中的框模型，我们知道了在浏览器中我们所看到的内容的存在形式——它们是由一个个的框组成的。每个框都有一个空白边，两个空白边相遇的时候会遇到什么问题呢？

举一个例子，在一个网页中有几个段落，第一个段落上面的空间等于段落的顶空白边。如果没有空白边叠加，后面的段落之间的空白边将是相邻顶空白边和底空白边的和，这就意味着段落之间的空间是页面顶部的两倍。如果空白边叠加在一起，那么各处的距离就变得一致了。如图

空白边叠加的定义：当两个空白边相遇时，它们将形成一个空白边。这个空白边的高度等于两个发生叠加的空白边的高度中的较大者。

以后我们学到定位和浮动的时候会知道，浮动的元素和绝对定位的元素是脱离了普通文档流的，它们不会发生空白边叠加。行内框也不会发生空白边叠加。

叠加图示（点击放大图片）：

注意：空白边的叠加是相当广泛的，当一个元素包围另一个元素时，如果没有填充或边框将空白边隔开，它们的空白边相遇时也会叠加。空元素的空白边也会自身发生叠加。