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

CSS line-height 文字行高屬性可以設定整個網頁的文字行高或是一個容器內的行高，例如 DIV 區塊內的文字行高，讓文字不要每一行都黏在一起，瀏覽起來比較舒適一些，為了能夠獲得較適合的行高，使用 line-height 的時候，通常必須同時考慮文字大小 font-size 或是文字的字型 font-family 等屬性，比較重要的還是 font-size 的文字尺寸，馬上來看 line-height 屬性的語法。

CSS line-height 文字行高語法

line-height: 行高數字與單位;

line-height 的參數只能寫一個，而且是數字+單位，可以用的單位例如 cm、em、px 等，建議使用 px 這個通用單位，例如我們要設定一個 25px 高的行高，可以這樣寫：「line-height:25px;」，另外，CSS line-height 屬性可以用在整個網頁的 <body> 標籤內，也可以用在任何網頁容器內，例如 DIV 區塊、HTML 表單的 textarea 文字欄位內，應用範圍相當廣泛。

CSS line-height 文字行高範例

<div style="line-height:20px;font-size:15px;border:1px #ccc solid;">
這是將文字行高設定為 20px 的第一行<br>
這是將文字行高設定為 20px 的第二行<br>
這是將文字行高設定為 20px 的第三行<br>
</div>
<div style="line-height:28px;font-size:15px;border:1px #ccc solid;">
這是將文字行高設定為 28px 的第一行<br>
這是將文字行高設定為 28px 的第二行<br>
這是將文字行高設定為 28px 的第三行<br>
</div>

呈現效果

這是將文字行高設定為 20px 的第一行
這是將文字行高設定為 20px 的第二行
這是將文字行高設定為 20px 的第三行

這是將文字行高設定為 28px 的第一行
這是將文字行高設定為 28px 的第二行
這是將文字行高設定為 28px 的第三行

為了呈現不同的 line-height 行高效果差異，範例總共準備了兩個 DIV 區塊，我們在 DIV 區塊內分別設定「line-height:20px;」以及「line-height:28px;」這兩種行高，字體大小則都是使用 15px，不難發現 CSS line-height 的效果主要在於垂直方向的行高差異，而不在於水平方向的文字間距，若要調整水平的文字間距，請參閱《CSS letter-spacing 文字水平間距設計》篇的介紹。

CSS line-height 文字行高算是使用率非常高的一個 CSS 屬性。

➤ 利用 line-height 設計文字垂直置中：CSS DIV 區塊內的文字垂直置中

更多網頁文字設計技巧