DIV 區塊內的文字行高設計

DIV 區塊內的文字行高是可以調整的,為什麼要調整 DIV 區塊內的文字行高呢?原因很簡單,因為要調整出最適合閱讀的行高,讓讀者可以輕鬆的閱讀,例如嘗試用較大的字體放在預設的 DIV 區塊內,很可能會出現不同行文字黏在一起或重疊的現象,為了避免這種情況發生,網頁設計師可以採用 CSS 的 line-height 屬性來調整 DIV 區塊的文字行高,讓整體視覺效果更舒服,提高網頁的瀏覽品質。

CSS line-height 屬性語法
line-height: 行高設定値;
其中的行高設定值可以使用預設的 normal、數字 + 單位(例如 25px)、百分比(%)或 inherit(繼承自父層的行高設定値),詳細的設定方式請參閱:CSS line-height 設定字體範圍高度(行間距)

DIV 區塊內的文字行高設計範例
<style type="text/css">
<!--
#DIV_A{
    margin-bottom:10px; //上方外距,參閱:CSS margin 屬性與用法範例
    border:1px #ccc solid; //區塊的邊框,參閱:CSS border 邊框
    padding:10px; //區塊內距,參閱:CSS padding 內距屬性與用法範例
}
#DIV_B {
    border:1px #ccc solid;
    line-height:30px; //設定文字行高
    padding:10px;
}
-->
</style>
<div id="DIV_A">這是第一行文字,此 DIV 尚未設定文字行高<br>這是第二行文字</div>
<div id="DIV_B">這是第一行文字,此 DIV 的文字行高設定為 30px。<br>這是第二行文字</div>
範例的實際效果
這是第一行文字,此 DIV 尚未設定文字行高
這是第二行文字
這是第一行文字,此 DIV 的文字行高設定為 30px。
這是第二行文字

我們在範例中準備了兩組 DIV 區塊,第一個 DIV 區塊(DIV_A)採用的是預設文字行高,所以行與行之間的距離比較靠近,第二個 DIV 區塊(DIV_B)則使用了 line-height 屬性將 DIV 區塊預設的行高修改為 30px,拉大了行與行之間的距離,這就是 DIV 區塊內的文字行高設計的基本技巧,至於應該要調整為多少比較適合呢?這沒有一個標準,最好是以整篇網頁文章的閱讀舒適度來決定。

延伸閱讀
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012 Englsih version
PHP Smarty MySQL JQuery Apache W3C