調整 DIV 區塊內的文字行高 - 網頁設計教學站

DIV 區塊內可以用來放文字、圖片、影片等等各式各樣的網頁資料，特別是用 DIV 區塊來劃分每個文字區域在網頁中要出現的位置，實在是非常好用，可是預設 DIV 區塊內的文字行高不一定很好看，如果文字行高太接近，會讓每一行文字黏在一起，視覺效果不好看，我們可以透過 CSS 內建的 line-height 屬性來設定 DIV 區塊內的文字行高，讓每一行文字之間排版出比較舒服的視覺效果，先來看看這個 line-height 屬性的語法要怎麼寫。

CSS line-height 屬性語法介紹

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

其中的＂行高數字與單位＂是網頁設計師可以自己決定的，使用數字加單位，例如 25px 意思是每行高為 25 像素。

調整 DIV 區塊內的文字行高範例

<div style="line-height:15px;border:2px #ccc solid;padding:5px;">
這個 DIV 區塊的文字行高設定為 15px<br>
這個 DIV 區塊的文字行高設定為 15px<br>
這個 DIV 區塊的文字行高設定為 15px
</div>
<div style="line-height:25px;border:2px #ccc solid;padding:5px;">
這個 DIV 區塊的文字行高設定為 25px<br>
這個 DIV 區塊的文字行高設定為 25px<br>
這個 DIV 區塊的文字行高設定為 25px
</div>

範例的實際效果

這個 DIV 區塊的文字行高設定為 15px
這個 DIV 區塊的文字行高設定為 15px
這個 DIV 區塊的文字行高設定為 15px

這個 DIV 區塊的文字行高設定為 25px
這個 DIV 區塊的文字行高設定為 25px
這個 DIV 區塊的文字行高設定為 25px

我們在範例中準備了兩個不同行高的 DIV 區塊，第一個 DIV 區塊的文字行高是 15px，第二個 DIV 區塊的文字行高則為 25px，兩者在視覺效果上就有很明顯的差異，網頁設計師可以多多利用 line-height 屬性的效果來調整網頁內的文字行高呈現。

延伸閱讀