2008/11/14

line-height

font-size, font-size-adjust, font-stretch | line-height
line-height

此特徵針對區塊元素內含的文字行元素,設定文字行矩格的最小高度。大部分瀏覽器也接受在文字行元素使用此特徵,參見下面的範例。可設為:

  1. normal:依據字型的高度計算矩格的高度,此為預設值。
  2. 數值:字型的高度乘上此數值,不可用負數。此項在 Firefox, Safari, Chrome 必須用在區塊元素方有效果,下面實測時使用 SPAN 會失敗;但在 IE6 則可以用在文字行元素。
  3. 長度:用長度設定矩格的高度,不可用負數。
  4. 百分比:字型的高度乘上百分比,不可用負數。
  5. inherit:繼承父元素的特徵值。
  • 雖然 line-height 改變了,但背景色所塗區域的高度不變。
  • 上例,在 IE8 出現特殊現象,在 SPAN 中加入 BR 分成兩行,相鄰的兩行的顏色不同;但在 IE6, Firefox, Safari, Chrome 是相同顏色。

使用沒有單位的數值,會將此數值比例傳給子元素使用。如果 line-height 使用有單位的長度或百分比,會在宣告的元素節點會換算成實際長度,然後傳給子元素。如果子元素改變 font-size,這時可能會與 line-height 不匹配而發生兩行重疊的現象。參考 Unitless line-heights

:HOVER, :ACTIVE 的應用。使用時要注意,在 IE6 中 :HOVER, :ACTIVE 只能用在 ANCHOR 元素。

javascript 應用。可以用 style 物件 的特徵 lineHeight,作動態變化。


©2008 -2009 by ant2legs, All Rights Reserved. ant2legs 擁有其製作的文章,圖片與程式的著作權,所有權利保留。