行內格式化

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

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

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

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

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

<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標記并不真的存在，但是段落表現得就像有這些標記一樣，每個文本行從段落繼承了樣式。因此，網頁設計只需為塊級元素創建line-height規則，而不必顯式地為其所有行內元素（也許只是虛構的行內元素）聲明line-height。

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

行內非替換元素

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

建立框

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

圖7-30: em框確定內容區離度

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

圖7-31：內容區加上行間距就等于行內框

假設有以下標記：

<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>

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

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

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

圖7-32：行中的行內框

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

圖7-33：段落中的行框

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