posts - 64, comments - 9, trackbacks - 0

行高的概念看上去很簡單——文字行的高度，其實，行高所涉及到的基礎知識，對于今后理解其它屬性也很重要。

大片密密麻麻的文字往往會讓人覺得乏味，因此適當地調整行高（line-height）可以減低閱讀的困難與枯燥，并且使頁面顯得美觀。行高指的是文本行的基線間的距離，但是文本之間的空白距離不僅僅是行高決定的，同時也受字號的影響。
7.3.1 語法 line-height屬性的具體定義列表如下：
語法： line-height : normal | <實數> | <長度> | <百分比> | inherit
說明： 設置元素中行的高度。
值： normal：默認行高，一般為1到1.2；
實數：實數值，縮放因子；
長度：合法的長度值，可為負數；
百分比：百分比取值基于元素的字體尺寸。
初始值： normal
繼承性： 繼承適用于： 所有元素媒體： 視覺計算值： 長度和百分比值為絕對值；
其他同指定值行高指的是文本行的基線間的距離。而基線（Base line），指的是一行字橫排時下沿的基礎線，基線并不是漢字的下端沿，而是英文字母x的下端沿，同時還有文字的頂線（Top line）、中線（Middle line）和底線（Bottom line），用以確定文字行的位置，如圖7-17 所示。

圖7-17 文字的基線行高與字體尺寸的差稱為行距（leading），如圖7-18所示。

圖7-18 行高 7.3.2 內容區域、行內框和行框 理論上講，一行中的每個元素都有一個內容區域，它是由字體尺寸決定的，如圖7-19所示。

圖7-19 內容區域行內元素會生成一個行內框（inline box），行內框只是一個概念，它無法顯示出來，但是它又確實存在。在沒有其他因素影響的時候，行內框等于內容區域，而設定行高則可以增加或者減少行內框的高度，即：將行距的值（行高-字體尺寸）除以2，分別增加到內容區域的上下兩邊，如圖7-20所示。

圖7-20 行內框與行高由于行高可以應用在任何元素上，因此同一行內的若干元素可能有不同的行高和行內框高，例如有如下代碼，其顯示如圖7-21所示。

<p& gt;行高20px。 行高50px。行高30px。

圖7-21 行內框與行框這里又有一個新的概念——行框（line box）。同行內框類似，行框是指本行的一個虛擬的矩形框，其高度等于本行內所有元素中行高最大的值。因此，當有多行內容時，每行都會有自己的行框，如圖7-22所示。

圖7-22 多行內容的行框

提示：理解行框和行內框的概念對于學習本章[7.4垂直對齊：vertical-align屬性]一節的內容非常重要。注意：行框的高度只同本行內元素的行高有關，而和父元素的高度（height）無關。

7.3.3 行高的計算與繼承 以em、ex和百分比為單位的行高，其基數是元素本身的字體尺寸。例如有代碼如下：

字高20px，行高2em。 字高30px，行高2em。

2個段落的行高都為2em，但是字體大小不同，因此顯示如圖7-23所示。

圖7-23 行高的計算行高可以設定得比字體高度小，此時多行的文字將疊加到一起，例如有如下代碼，其顯示如圖7-24所示。

p { font-size : 20px; line-height :10px; } 字高20px，行高10px。此時多行的文字將疊加到一起。

圖7-24 比字體高度小的行高行高是可繼承的，但是繼承的是計算值，例如有如下代碼：

p { font-size :20px; line-height : 2em; } p span { font-size : 30px; } 字高20px。字高30px。 元素的行高2em，字體尺寸為20px，因此計算值為40px，雖然元素本身的字體尺寸為30px，不過其繼承的行高仍為40px。但是在不同的瀏覽器內顯示的效果卻不盡相同，如圖7-25所示。