CSS line-height 設定字體範圍高度(行間距)

CSS 語法可以設定輕鬆設定文字的行間距,也就是每行之間的距離,讓閱讀起來更加舒適,如果沒有設定 line-height,則每行間的距離以瀏覽器預設的效果呈現,這時候會有一個問題,就是文字大小可能會影響到文章的呈現品質,所以最好還是給 line-height 値比較好。

CSS line-height 基本語法
line-height: 設定値;
設定値的部分可以有 normal(預設值)、數字、高度値(含單位)、百分比以及 inherit(繼承自父層的行高値)等,其中 inherit 建議不要使用,因為舊型 IE 瀏覽器可能不支援,我通常都是使用高度値,看個簡單的範例。

CSS line-height 範例
<span style='line-height: 20px;font-size:13px;'>
 line-height: normal 文字行高設定第一行<br>
 line-height: normal 文字行高設定第二行
</span>
呈現效果如
line-height: normal 文字行高設定第一行
line-height: normal 文字行高設定第二行
範例中我們給 line-height 的値是 20px,這也代表著每行高度為 20px,你也可以嘗試用其它的値帶入範例看結果。要讓文章呈現好的閱讀效果,line-height 通常與 font-size(文字大小)搭配使用,如果沒有設定好文字大小,可能會出現文字重疊的現象。

延伸閱讀
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012