從前面的討論可以了解到，內(nèi)邊距、外邊距和邊框都可以應(yīng)用于網(wǎng)頁(yè)設(shè)計(jì)行內(nèi)非替換元素。行內(nèi)元素的這些方面根本不會(huì)影響行框的高度。如果對(duì)一個(gè)無(wú)內(nèi)外邊距的span元素應(yīng)用某個(gè)邊框，可能得到如圖7-40所示的結(jié)果。

網(wǎng)站建設(shè)行內(nèi)元素的邊框邊界由font-size而不是line-height控制。換句話(huà)說(shuō)，如果一個(gè)span元素的font-size為12px, line-height為36px，其內(nèi)容區(qū)就是12px高，邊框?qū)鼑搩?nèi)容區(qū)。

或者，可以為行內(nèi)元素指定內(nèi)邊距，這會(huì)把邊框從文本本身拉開(kāi)：

span {border: 1px solid black; padding: 4px;}

注意，這個(gè)內(nèi)邊距并沒(méi)有改變內(nèi)容區(qū)的具體形狀，不過(guò)它會(huì)影響這個(gè)元素行內(nèi)框的高度。類(lèi)似地，網(wǎng)頁(yè)設(shè)計(jì)中向一個(gè)行內(nèi)元素增加邊框也不會(huì)影響行框的生成和布局。

至于外邊距，實(shí)際上，外邊距不會(huì)應(yīng)用到行內(nèi)非替換元素的頂端和底端，它們不影響行框的高度。不過(guò)，行內(nèi)元素的兩端則是另一回事。

注意：CSS2.1中明確指定了外邊距的放置，它定義了margin-top和margin-bottom （可以應(yīng)用到不是行內(nèi)非替換元素的所有其他元素），而不是簡(jiǎn)單地說(shuō)用戶(hù)代理應(yīng)當(dāng)忽略上、下外邊距。

應(yīng)當(dāng)還記得，行內(nèi)元素基本上會(huì)作為一行放置，然后分成多個(gè)部分，所以，如果向一個(gè)行內(nèi)元素應(yīng)用外邊距，這些外邊距將出現(xiàn)在其開(kāi)始和末尾，分別為左、右外邊距。內(nèi)邊距也出現(xiàn)在邊界上。因此，網(wǎng)頁(yè)設(shè)計(jì)盡管內(nèi)邊距和外邊距（以及邊框）不影響行高，但是它們確實(shí)能影響一個(gè)元素內(nèi)容的布局，可能將文本推離其左右兩端。實(shí)際上，如果左、右外邊距為負(fù)，可能會(huì)把文本拉近行內(nèi)元素，甚至導(dǎo)致重疊。

可以把行內(nèi)元素想成是一個(gè)紙片，外圍有一些塑料邊。在多行上顯示行內(nèi)元素就像是把一個(gè)大紙片剪成一些小紙片。不過(guò)，每個(gè)小紙片上不會(huì)增加額外的塑料邊。小紙片上的塑料邊還是最初那個(gè)大紙片上的塑料邊，所以看上去只是原來(lái)紙片（行內(nèi)元素）最前和最后兩端上出現(xiàn)塑料邊。

所以，網(wǎng)站建設(shè)如果行內(nèi)元素有一個(gè)背景，而且內(nèi)邊距足夠大以至于行背景重疊，此時(shí)會(huì)發(fā)生什么情況呢？看下面的例子：

p {font-size: 15px; line-height: 1em;}

p span {background:#999; padding-top: 10px; padding-bottom: 10px;}

span元素中的所有文本都有15像素高的內(nèi)容區(qū)，而且為各內(nèi)容區(qū)的頂部和底部各增加了10像素的內(nèi)邊距。這些額外的像素不會(huì)增加行框的高度，這原本很好，不過(guò)這里有背景色。

網(wǎng)站建設(shè)CSS 2.1明確指出行框按文檔的順序繪制：“這會(huì)導(dǎo)致后續(xù)行的邊框在前面行的邊框和文本上繪制?！边@個(gè)原則同樣適用于背景，如圖7-43所示。另一方面，CSS2允許用戶(hù)代理“‘切掉’邊框和內(nèi)邊距區(qū)（也就是不顯示邊框和內(nèi)邊距）”。因此，具體結(jié)果可能很大程度上取決于用戶(hù)代理遵循哪一個(gè)規(guī)范。