管理line-height

在前幾節中我們已經(jīng)了解到，網(wǎng)頁(yè)設計中改變一個(gè)行內元素的line-height可能導致文本行相互重疊。不過(guò)，在所有情況下，這種修改都是針對單個(gè)元素的，所以，如何以一種更一般的方式影響元素的line-height而避免內容重疊呢？

一種辦法是對font-size有改變的元素結合使用em單位。例如：

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

big {font-size: 250%; line-height! 1em;}

<p> Not only does this paragraph have "normal" text, but it also<br> 

contains a line in which <big>some big text </big> is found.<br>

This large text helps illustrate our point.

</p>

通過(guò)為big元素設置一個(gè)line-height，就提高了行框的總高度，從而提供足夠的空間來(lái)顯示這個(gè)big元素，而不會(huì )與任何其他文本重疊，也不會(huì )改變段落中所有行的line-height。這里使用了值1em，所以big元素的line-height將設置為與big的 font-size大小相等。要記住，網(wǎng)站建設line-height相對于元素本身的font-size設置，而不是相對于父元素設置。其結果如圖7-37所示。

注意，以下樣式也會(huì )生成如圖7-37所示的結果：

p {fpnt-size: 14px; line-height: 1;}

big (font-size: 250%;)

除非line-height值作為縮放因子被繼承，否則p和big元素的line-height值都為1。因此，網(wǎng)頁(yè)設計中行內框的高度與內容區的高度一致。

一定要真正理解前幾節的介紹，因為如果再增加邊框，問(wèn)題會(huì )更復雜。假設在所有超鏈接上加一個(gè)5像素的邊框：

a:link {border: 5px solid blue;}

倘若網(wǎng)站建設沒(méi)有設置一個(gè)足夠大的line-height來(lái)容納這個(gè)邊框，就有覆蓋其他行的危險?？梢允褂胠ine-height增加未訪(fǎng)問(wèn)鏈接行內框的大小，就像前例中對big元素的做法一樣；在這里，只需讓line-height值比這些鏈接的font-size值大10像素。不過(guò)，如果你不知道字體大小是多少像素，這可能很困難。

另一種解決方法是增加段落的line-height。這將會(huì )影響整個(gè)元素中的每一行，而不只是出現加邊框超鏈接的那一行：

p {font-size: 14px; line-height: 24px;}

a:link {border: 5px solid blue;}

由于各行上下都增加了額外的空間。超鏈接外的邊框不會(huì )覆蓋其他行，如圖7-38所示，

圖7-38：增加line-height以為行內元素邊框留出空間

當然，這種方法在這里是可行的，因為所有文本的大小都相同。如果行中還有另外一些元素改變了行框的高度，邊框情況也可能發(fā)生變化?？紤]以下規則：

P {font-size: 14px; line-height: 24px;}

a:link {border: 5px solid blue;}

big {font-size: 150%; line-height: 1.5em;}

根據這些規則，段落中big元素行內框的高度將是31.5像素（14x1.5x1.5），這也是行框的高度。為了保證基線(xiàn)間隔一致，必須讓p元素的line-height等于或大于32px,

基線(xiàn)與行高

網(wǎng)頁(yè)設計中各行框的具體高度取決于其組成元素相互之間如何對齊。這種對齊往往很大程度上依賴(lài)于基線(xiàn)落在各元素（或匿名文本各部分）中的哪個(gè)位置，因為這個(gè)位置確定了其行內框如何擺放?；€(xiàn)在各em框中的位置對于不同的字體是不同的。這個(gè)信息內里在字體文件中，除非直接編輯字體文件，否則無(wú)法修改。

因此，要得到一致的基線(xiàn)間隔，這更像是一門(mén)藝術(shù)而不只是一門(mén)科學(xué)。如果網(wǎng)頁(yè)設計中使用一種單位（如em）來(lái)聲明所有字體大小和行高，就很有可能得到一致的基線(xiàn)間隔。不過(guò)，如果混合使用了不同的單位，就會(huì )困難得多，甚至是不可能的。在寫(xiě)作本書(shū)時(shí)，為了讓創(chuàng )作人員能夠保證一致的基線(xiàn)間隔而不論內聯(lián)內容是什么，已經(jīng)提出了很多屬性提案，這會(huì )大大角化行內格式化的某些方面。不過(guò)，所建議的這些屬性都沒(méi)有具體實(shí)現，所以其采納還遙遙無(wú)期。

縮放行高

可以看到，設置line-height的最好辦法是使用一個(gè)原始數字值。之所以說(shuō)這種方法最好，原因是這個(gè)數會(huì )成為縮放因子，而該因子是一個(gè)繼承值而非計算值。假設你希望一個(gè)文檔中所有元素的line-height都是其font-size的1.5倍，可以如下聲明：

body {line-height: 1.5;}

縮放因子1.5在元素間逐層傳遞，在各層上，這個(gè)因子都作為一個(gè)乘數與各元素的font-size相乘。因此，以下標記會(huì )得到如圖7-39所示的結果：

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

small {font-size: 66%;}

big {font-size: 200%;}

<p>This paragraph has a line-height of 1.5 times its font-size. In addition, 

any e1ements within it <small>such as this small element</small> also have 

line-heights 1.5 times their font-size...and that includes <big>this big 

e1ement right here</big>. By using a scaling factor, line-heights scale 

to match the font-size of any e1ement.</p>在本例子中，small元素的行高為15px，而對于big元素則為45px（這些數看上去有些過(guò)分，不過(guò)它們與總的頁(yè)面設計是一致的）。當然，如果你不希望big文本生成太多行間距，可以為它另外指定一個(gè)line-height值，這會(huì )覆蓋繼承的縮放因子：

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

small {font-size: 66%;}

big {font-size: 200%; line-height: 1em;}

還有一種解決方案（可能這是最簡(jiǎn)單的一種方法），即適當地設置樣式，使行高恰好能包含行內容，而沒(méi)有多余的空間。這里你可能會(huì )使用line-height值1.0。這個(gè)值乘以每個(gè)font-size，其結果與各元素的font-size值完全相等。因此，對于每個(gè)元素，行內框與內容區相同，這意味著(zhù)會(huì )使用所需的絕對最小大小來(lái)包含各元素的內容區。

注意：網(wǎng)頁(yè)設計中大多數字體在字符字形行之間還顯示有一點(diǎn)空間。因為字符往往比其em框要小。只有script ("cursive"）字體例外，其字符字形往往大于其em框。