網頁-文字行高

網頁-文字行高

● 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 屬性。