CSS line-height 網頁文字行高設計 - CSS 學習筆記

CSS line-height 網頁文字行高設計可以讓網頁文章的垂直方向排版更好看，由於每個網頁的文字垂直距離（或稱為行高）並沒有標準值，所以在使用 CSS line-height 屬性的時候，通常網頁設計師都要多嘗試幾次才能找出最棒的行高效果，網頁設計就是這樣，要設計出美觀的網頁就需要多花點時間與功夫。line-height 屬性也常常與控制文字水平距離的 letter-spacing 屬性一起搭配使用，兩個屬性的搭配就可以隨意的調整網頁文字的水平與垂直距離囉！

CSS line-height 屬性語法

line-height: 行高;

CSS line-height 屬性的參數＂行高＂可以接受多種不同的設定方式，例如標準的 normal、自訂垂直距離以及繼承自父層的文字行高效果，以下這張表提供給各位讀者朋友參考。

CSS line-height 屬性參數

參數	樣式說明
line-height:normal;	預設垂直距離，沒有特殊設定。
line-height:自訂距離;	自訂垂直距離，用數字加單位或百分比，例如 25px, 10%。
line-height:inherit;	繼承自父層的文字垂直距離，部份瀏覽器不支援。

CSS line-height 屬性實際範例一、用 px 單位表示

範例的實際效果

測試文字第一行
測試文字第二行

範例一是很常用的 line-height 設定方式，一般的網頁文字行高通常設定在 22px 至 25px 之間，但並沒有一定的標準，範例採用 30px 是稍微有一點點增加視覺效果，如果 line-height 的參數數字再加大，則行高會再度增加，這裡我們採用 px 做為行高單位是因為 px 算是相當普遍的單位，CSS line-height 也接受 em, cm 等長度單位做為行高單位。

CSS line-height 屬性實際範例二、用百分比表示

範例的實際效果

測試文字第一行
測試文字第二行

範例二採用的是百分比（%）為行高單位，由於百分比有一點難用，因為容易受限於網頁本身的其他因素而影響效果，不過還是會有許多網頁設計師採用，所以還是寫個範例給各位參考，我們以 80% 做為行高，看起來兩行間有一點重疊到，要不重疊的話，可以將 line-height 的百分比拉大，例如增加到 100% 或以上。

稍微提醒一下各位讀者朋友，有許多人會誤以為 100% 就是 normal 的效果，其實不然，單純一個網頁的 line-height 行高設為 100%，兩行之間的垂直距離可能還是會比設為 normal 靠近一點，所以才說一定要多嘗試幾次才能設計出好看的效果。

如果想調整網頁文字水平間距離，請參考：CSS letter-spacing 屬性設計文字水平間距離。

延伸閱讀