行內(nèi)格式化

第6章曾討論過，網(wǎng)頁設計中所有元素都有一個line-height。這個值會顯著地影響行內(nèi)元素如何顯示，所以要特別注意。

首先來看如何確定一行的高度。行的高度（或行框的高度）由其組成元素和其他內(nèi)容（如文本）的高度確定。有一點很重要，line-height實際上只影響行內(nèi)元素和其他行內(nèi)內(nèi)容，而不影響塊級元素，至少不會直接影響塊級元素。也可以為一個塊級元素設置line-height 值，但是這個值只是應用到塊級元素的內(nèi)聯(lián)內(nèi)容時才會有視覺影響。例如，考慮以下空段落：

<p style="line-height: 0.25em;"></p>

由于沒有內(nèi)容，這個段落沒有任何顯示，你什么也看不到。這個段落的line-height可能是某個值（不論是0.25em還是25in），但是如果沒有內(nèi)容，line-height是多少對于創(chuàng)建行框來說都沒有任何區(qū)別。

當然可以為一個塊級元素設置line-height值，并將這個值應用到塊中的所有內(nèi)容，而不論內(nèi)容是否包含在行內(nèi)元素中。從某種程度上講，塊級元素中包含的各文本行本身都是行內(nèi)元素，而不論是否真正用行內(nèi)元素的標記包圍起來。只要你愿意，可以像下面這樣寫一個虛構的標記序列：

<p>

<line>This is a paragraph with a number of</line>

<line>lines of text which make up the</line>

<line>contents.</line>

</p>

盡管line標記并不真的存在，但是段落表現(xiàn)得就像有這些標記一樣，每個文本行從段落繼承了樣式。因此，網(wǎng)頁設計只需為塊級元素創(chuàng)建line-height規(guī)則，而不必顯式地為其所有行內(nèi)元素（也許只是虛構的行內(nèi)元素）聲明line-height。

虛構的line元素確實可以說明對塊級元素設置line-height會有怎樣的行為。根據(jù)CSS規(guī)范，在塊級元素上聲明line-height會為該塊級元素的內(nèi)容設置一個最小行框高度。因此，聲明p.spacious{line-height: 24pt;}意味著每個行框的最小高度為24點。從理論上講，只有行內(nèi)元素的內(nèi)容才會繼承這個行高。大多數(shù)文本并未包含在行內(nèi)元素中。因此，如果假裝各行包含在虛構的line元素中，這個摸型就能很好地工作。

行內(nèi)非替換元素

在前面的格式化知識基礎上，來討論如果網(wǎng)頁設計行中只包含非替換元素（或匿名文本）將如何構造。了解這一點后，你就能更好地理解行內(nèi)布局中非替換元素和替換元素之間的區(qū)別。

建立框

首先，對于行內(nèi)非替換元素或匿名文本某一部分，font-size值確定了內(nèi)容區(qū)的高度。如果一個行內(nèi)元素font-size為15px，則內(nèi)容區(qū)的高度為15像素，因為元素中所有em 框的高度都是15像素，如圖7-30所示，

圖7-30: em框確定內(nèi)容區(qū)離度

下面再來考慮元素的line-height值，以及它與font-size值之差。如果一個行內(nèi)非替換元素的font-size為15px, line-height為21px，則相差6像素。用戶代理將這6像素一分為二，將其一半分別應用到內(nèi)容區(qū)的頂部和底部，這就得到了行內(nèi)框。這個過程如圖7-31所示。

圖7-31：內(nèi)容區(qū)加上行間距就等于行內(nèi)框

假設有以下標記：

<p style="font-size: 12px; line-height: 12px;">

This is text,<em>some of which is emphasized</em>, plus other text<br> which is <strong style="font-size: 24px;">strongly emphasized</strong> and which is<br>

larget than the surrounding text.

</p>

在這個例子中，大多數(shù)文本的font-size都是12px，只有一個行內(nèi)非替換元素中的文本大小是24px。不過，所有文本的line-height都是12px，因為line-height是一個繼承屬性。因此，strong元素的line-height也是12px。

所以，對于font-size和line-height都是12px的各部分文本，內(nèi)容高度沒有改變（因為12px和12px之差為0)，因此，行內(nèi)框的高度為12像素。不過，對于strong文本，line-height和font-size之差是-12px，將其除2來確定半間距（-6px），再把這個半間距分別增加到內(nèi)容區(qū)的頂部和底部，就得到了行內(nèi)框。由于這里增加的都是負數(shù)，所以最后行內(nèi)框高度為12像素。12像素高的行內(nèi)框在元素內(nèi)容區(qū)（24像素高）中垂直居中，所以行內(nèi)框實際上小于內(nèi)容區(qū)。

至止，聽上去對網(wǎng)頁設計各部分文本所做的都一樣，而且所有行內(nèi)框大小都相等，但并非如此。第二行中的行內(nèi)框盡管大小相同，但它們排列得并不整齊，因為文本都是按基線對齊的（見圖7-32）。

圖7-32：行中的行內(nèi)框

由于行內(nèi)框確定了整個行框的高度，其相互位置很重要。網(wǎng)頁設計中行框定義為行中最高行內(nèi)框的頂端到最低行內(nèi)框底端之間的距離，而且各行框的頂端挨著上一行行框的底端。根據(jù)圖7-32所示的結果，段落將如圖7-33所示。

圖7-33：段落中的行框

注意：在圖7-33中可以看到，中間一行比另外兩行要高，不過還是不夠大，不能把所有文本都包含在內(nèi)。匿名文本的行內(nèi)框確定了行框的底端，strong元素行內(nèi)框的頂端則設置了行框的頂端。由于行內(nèi)框的頂端在元素內(nèi)容區(qū)內(nèi)部，所以元素的內(nèi)容落在了行框的外面，實際上與其他行框發(fā)生了重疊。其結果是，文本行看上去很不規(guī)則。本章后面還將介紹一些方法來處理這種行為，另外會介紹一些能得到一致基線間隔的方法。