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

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

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



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


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


叠加图示(点击放大图片):

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

没有评论: