行內(nèi)替換元素

一般認(rèn)為網(wǎng)頁設(shè)計(jì)行內(nèi)替換元素有固有的高度和寬度，例如，一個(gè)圖像的高度和寬度可能是某個(gè)像素?cái)?shù)。因此，有固有高度的替換元素可能導(dǎo)致行框比正常要高。這不會(huì)改變行中任何元素的line-height值，包括替換元素本身。相反，只是會(huì)讓行框的高度恰好能包含替換元素（以及所有框?qū)傩裕?。換句話說，會(huì)用替換元素整體（包括內(nèi)容、外邊距、邊距和內(nèi)邊距）來定義元素的行內(nèi)框。以下樣式就能得到這樣一個(gè)例子。

字形與內(nèi)容區(qū)

你可能會(huì)盡力避免行內(nèi)非替換元素的背景重疊，盡管如此，這種情況還是可能發(fā)生，這取決于使用何種字體。問題在于一個(gè)字體的em框與其字符字形之間可能存在差別?？梢钥吹?，對(duì)于大多數(shù)字體，其em框的高度與字符字形的高度都不一致。

這聽上去可能很抽象，不過有很實(shí)際的后果。網(wǎng)站建設(shè)CSS2.1中指出：“內(nèi)容區(qū)的高度應(yīng)當(dāng)基于字體，但是這個(gè)規(guī)范并沒有指定如何基于字體確定內(nèi)容區(qū)的高度。用戶代理可能……使用em框，也可能使用字體的最大上升變形和下降變形（如果使用字體的最大上升變形和下降變形，能確保字形中落在em框上面或下面的部分仍在內(nèi)容區(qū)內(nèi)，但是這樣一來，不同的字體會(huì)有不同大小的框）?！?/p>

換句話說，一個(gè)行內(nèi)非替換元素的“繪制區(qū)”要由用戶代理來決定。如果一個(gè)用戶代理使em框的高度作為內(nèi)容區(qū)的高度，那么行內(nèi)非替換元素的背景就與em框的高度相等（即值font-size），如果用戶代理使用字體的最大上升變形和下降變形，背景就可能比ex框高或矮。因此，盡管可以為行內(nèi)非替換元素指定line-height 為1em，但其背景還是有可能與其他行的內(nèi)容重疊。

在CSS2或CSS2.1中沒有辦法避免這種重疊，不過已經(jīng)建議網(wǎng)站建設(shè)CSS3增加一些屬性，允許創(chuàng)作人員對(duì)用戶代理的行為進(jìn)行控制。在這些屬性得到廣泛實(shí)現(xiàn)之前，用CSS 無法得到真正準(zhǔn)確的格式編排。

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

img (height: 30px; margin: 0; padding: 0; border: none;}

圖7-44：替換元素可以增加行框的高度，但不影響line-height值

盡管有所有這些空白，但段落或圖像本身的line-height有效值并沒有因此改變。line-height:對(duì)圖像的行內(nèi)框沒有任何影響。由于圖7-44中的圖像沒有內(nèi)邊距、外邊距或邊框，其行內(nèi)框與其內(nèi)容區(qū)相同，在這里就是30像素高。

然而，網(wǎng)頁設(shè)計(jì)行內(nèi)替換元素還是有一個(gè)line-height值。為什么呢？在最常見的情況下，行內(nèi)替換元素需要這個(gè)值，從而在垂直對(duì)齊時(shí)能正確地定位元素。例如，要記住，vertical-align的百分?jǐn)?shù)值要相對(duì)于元素的line-height來計(jì)算。所以：

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

img {vertical-align: 50%;}

<p>The image in this sentence <img src="test.gif" alt="test image"> 

will be raised 9 pixels.</p>

line-height的繼承值使圖像上升9個(gè)像素（而不是其他數(shù)字）。如果沒有l(wèi)ine-height值，它就無法完成百分?jǐn)?shù)值指定的垂直對(duì)齊，對(duì)于垂直對(duì)齊來說，圖像本身的高度無關(guān)緊要，關(guān)鍵是line-height的值。

不過，對(duì)于網(wǎng)頁設(shè)計(jì)其他替換元素，將line-height值傳遞到該替換元素中的后代元素可能很重要。SVG圖像就是這樣一個(gè)例子，它使用CSS對(duì)圖像中的所有文本設(shè)置樣式。