CSS line-height 行高

此屬性是CSS中使用最為頻繁的屬性之一，從字面意思看它用於設定行高。

事實也是如此，最常見的操作是通過此屬性設定文字居中顯示。

關於設定為本居中可以參閱如下兩篇文章：

（1）.單行文字居中參閱CSS 文字居中一章節。

（2）.多行文字居中參閱CSS多行文字垂直居中效果一章節。

大多數教程對於此屬性的介紹過於簡單，下面再通過程式碼例項對其進行一下詳細介紹。

語法結構：

[CSS] 純文字檢視 複製程式碼
line-height : normal | <實數> | <長度> | <百分比> | inherit

屬性值解析：

（1）.normal：預設值，通常值介於1至1.2之間，不同瀏覽器可能會有所不同。

（2）.實數：一個數字，用來設定縮放因子。

（3）.長度：設定具體的行高，比如16px。

（4）.百分比：通過百分比方式設定行高。

（5）.inherit：繼承父元素的行高，IE8和IE8以下瀏覽器不支援。

程式碼例項如下：

（1）.normal值：

明確設定屬性值為normal或者沒有設定line-height屬性，同時沒有繼承其他特別line-height屬性值的情況下。

line-height屬性值就為nomal，此值大小在1到1.2之間，不同的瀏覽器中會有一些差別，以值為1.2為例子。

可以認為nomal值是一個特殊的縮放因子。

[CSS] 純文字檢視 複製程式碼
body{
  font-size:16px;
  line-height:normal;
}
h1{font-size:32px;}
p{font-size:16px;}
#footer{font-size:12px}

那麼相關元素的最終line-height屬性值如下：

由上面圖示也可以看出，normal屬性值相當於一個特殊的縮放因子。

（2）.實數值：

當屬性值為一個純數字的時候，這個時候就是規定了一個縮放因子。

縮放的參考物件就是當前元素字型的大小。

子元素所繼承的也是這個縮放因子，而不是父元素通過縮放因子所計算出來的行高值。

[CSS] 純文字檢視 複製程式碼
body{
  font-size:16px;
  line-height:1.5;
}
h1{font-size:32px;}
p{font-size:16px;}
#footer{font-size:12px}

那麼相關元素的最終line-height屬性值如下:

（3）.長度值：

也就是給line-height一個確定的值，比如line-height:20px;

這個就比較明確了，子元素也會繼承這個設定的值。

[CSS] 純文字檢視 複製程式碼
body{
  font-size:16px;
  line-height:20px;
}
h1{font-size:32px;}
p{font-size:16px;}
#footer{font-size:12px}

那麼相關元素的最終line-height屬性值如下:

（4）.百分比值：

當屬性值為百分比的時候，那麼會以當前元素的字型的大小獲取line-height屬性值。

比如當前元素的字型大小為16px，line-height屬性值為120%，那麼line-height屬性值實際就為19.2px。

那麼當前元素的子元素就會繼承這個19.2px，而不是120%這個百分比。

[CSS] 純文字檢視 複製程式碼
body{
  font-size:16px;
  line-height:120%;
}
h1{font-size:32px;}
p{font-size:16px;}
#footer{font-size:12px}

那麼相關元素的最終line-height屬性值如下:

相關閱讀：

（1）.百分比屬性值與數字屬性值的區別參閱line-height屬性值百分比和數字的區別一章節。

（2）.與line-height相關的一些概念參閱line-height屬性的行內框和行框一章節。