CSS教程：行高line-height屬性(1)

2024-07-11 08:42:53

字體：大中小

來源：轉載

供稿：網友

相關文章：CSS教程：行高line-height屬性（2）行高的概念看上去很簡單——文字行的高度，其實，行高所涉及到的基礎知識，對于今后理解其它屬性也很重要。
大片密密麻麻的文字往往會讓人覺得乏味，因此適當地調整行高（line-height）可以減低閱讀的困難與枯燥，并且使頁面顯得美觀。行高指的是文本行的基線間的距離，但是文本之間的空白距離不僅僅是行高決定的，同時也受字號的影響。 7.3.1語法 line-height屬性的具體定義列表如下：語法：line-height:normal|<實數>|<長度>|<百分比>|inherit 說明：設置元素中行的高度。值：normal：默認行高，一般為1到1.2；實數：實數值，縮放因子；長度：合法的長度值，可為負數；百分比：百分比取值基于元素的字體尺寸。初始值：normal 繼承性：繼承適用于：所有元素媒體：視覺計算值：長度和百分比值為絕對值；其他同指定值行高指的是文本行的基線間的距離。而基線（Baseline），指的是一行字橫排時下沿的基礎線，基線并不是漢字的下端沿，而是英文字母x的下端沿，同時還有文字的頂線（Topline）、中線（Middleline）和底線（Bottomline），用以確定文字行的位置，如圖7-17 所示。 /web/css/text/img/text_017.gif

圖7-17文字的基線行高與字體尺寸的差稱為行距（leading），如圖7-18所示。 /web/css/text/img/text_018.gif

圖7-18行高 7.3.2內容區域、行內框和行框 理論上講，一行中的每個元素都有一個內容區域，它是由字體尺寸決定的，如圖7-19所示。 /web/css/text/img/text_019.gif

圖7-19內容區域行內元素會生成一個行內框（inlinebox），行內框只是一個概念，它無法顯示出來，但是它又確實存在。在沒有其他因素影響的時候，行內框等于內容區域，而設定行高則可以增加或者減少行內框的高度，即：將行距的值（行高-字體尺寸）除以2，分別增加到內容區域的上下兩邊，如圖7-20所示。 /web/css/text/img/text_020.gif

圖7-20行內框與行高由于行高可以應用在任何元素上，因此同一行內的若干元素可能有不同的行高和行內框高，例如有如下代碼，其顯示如圖7-21所示。 <pstyle="line-height:20px;"><p& gt;行高20px。<strongstyle="line-height:50px;"> 行高50px。<spanstyle="line-height:30px;">行高30px。
/web/css/text/img/text_021.gif