line-height

基本信息

大片密密麻麻的文字往往會讓人覺得乏味，因此適當地調整行高（line-height）可以減低閱讀的困難與枯燥，並且使頁面顯得美觀。行高指的是文本行的基線間的距離，但是文本之間的空白距離不僅僅是行高決定的，同時也受字號的影響。

行高指的是文本行的基線間的距離（更簡單來說，行高是指文字尺寸與行距之間的和）。而基線（Base line），指的是一行字橫排時下沿的基礎線，基線並不是漢字的下端沿，而是英文字母x的下端沿，同時還有文字的頂線（Top line）、中線（Middle line）和底線（Bottom line），用以確定文字行的位置。行高與字型尺寸的差稱為行距（leading）,也就是說行高是指文字尺寸與行距之間的和。

定義

line-height 屬性設定行間的距離（行高）。

注釋：不允許使用負值。




JavaScript 語法：	object.style.lineHeight="2"

參數設定

值	描述
normal	默認。設定合理的行間距。
number	設定數字，此數字會與當前的字型尺寸相乘來設定行間距。
length	設定固定的行間距。
%	基於當前字型尺寸的百分比行間距。
inherit	規定應該從父元素繼承 line-height 屬性的值。

瀏覽器支持

所有瀏覽器都支持 line-height 屬性。

注釋：任何的版本的 Internet Explorer （包括 IE8）都不支持屬性值 "inherit"。

說明

檢索或設定對象的行高。即字型最底端與字型內部頂端之間的距離。

如行內包含多個對象，則套用最大行高。此時行高不可為負值。

對應的腳本特性為lineHeight。請參閱我編寫的其他書目。

該屬性會影響行框的布局。在套用到一個塊級元素時，它定義了該元素中基線之間的最小距離而不是最大距離。

line-height 與 font-size 的計算值之差（在 CSS 中成為“行間距”）分為兩半，分別加到一個文本行內容的頂部和底部。可以包含這些內容的最小框就是行框。

示例

div {line-height:6px; }

div {line-height:10.5em; }

注意

1.用line-height只對文字起作用對於圖片時失效

2.用dreamweaver 可以看到即時的line-height 的效果

3.該值不能使用負值，使用了也無效的

需要注意的是,在各瀏覽器下對於line-height的解決也是有細微的區別的,上下會有1px的差別,如果行高是偶數的話,大部分瀏覽器解釋還是比較正常,如果是奇數的話,有些瀏覽器會上比下多1px,而另一些瀏覽器會下比上多1px,對於有些要求比較嚴格的網站,建議行高設計時用偶數

line-height

基本介紹

基本信息

定義

參數設定

說明

示例

注意

實例

相關詞條

熱門詞條