深入瞭解css的行高Line Height屬性（圖文並茂）

什麼是行間距。

古時候我們使用印刷機來出來文字。印刷出來的每個字，都位於獨立的一個塊中。

行間距，即傳說中控制兩行文字垂直距離的東東。在CSS中，line-height被用來控制行與行之間垂直距離。

不過，行間距與半行間距，還是取決於CSS中的line-height。那麼，如何來使用line-height呢。

預設狀態，瀏覽器使用1.0-1.2 line-height, 這是一個初始值。你可以定義line-height屬性來覆蓋初始值：p｛line-height:140%｝

你可以有5種方式來定義line-height。

1.line-height可以被定義為：body{line-height:normal;}

2.line-height可以被定義為：body{line-height:inherit;}

3.line-height可以使用一個百分比的值body{line-height:120%;}

4.line-height可以被定義為一個長度值(px,em等) body{line-height:25px;}

5.line-height也可以被定義為純數字， body{line-height:1.2}

 

縮寫line-height

那5種line-height寫法，可以在font屬性中縮寫。line-height的值緊跟著font-size值使用斜杠分開，如：<font-size>/<line-height>

執行個體：body{font:100%/normal  arial;} , body{font:100%/120%  arial;} ,body{font:100%/1.2  arial;}  ,body{font:100%/25px  arial;} 

 

計算line-height

有些CSS屬性是可繼承的（inherited），從層疊的元素裡傳遞下來。這樣做是為了方便開發人員，不再為後代元素重新設值。

對於line-height繼承有點複雜。

1、百分比

2.長度

3 值：normal

4 純數字

 

（但實戰應用在中文字型或中英文字型混合，以及IE678，XP win7裡，行高規則又有所不同，淚流滿面）