CSS line-height 網頁文字行高設計

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 屬性設計文字水平間距離

延伸閱讀
分享於 2014-12-17 - 更新於 2017-07-31