-
line-height
鎖定
web前端用語，用於對網頁文字及其他元素設置行高，由於會影響元素高度，也可用於調節一些元素的高度。
- 中文名
- 行高
- 外文名
- line-height
- 默認值
- normal
- 繼承性
- yes
- 版 本
- CSS1
line-height基本信息
大片密密麻麻的文字往往會讓人覺得乏味，因此適當地調整行高（line-height）可以減低閲讀的困難與枯燥，並且使頁面顯得美觀。行高指的是文本行的基線間的距離，但是文本之間的空白距離不僅僅是行高決定的，同時也受字號的影響。
行高指的是文本行的基線間的距離（更簡單來説，行高是指文字尺寸與行距之間的和）。而基線（Base line），指的是一行字橫排時下沿的基礎線，基線並不是漢字的下端沿，而是英文字母x的下端沿，同時還有文字的頂線（Top line）、中線（Middle line）和底線（Bottom line），用以確定文字行的位置。行高與字體尺寸的差稱為行距（leading）,也就是説行高是指文字尺寸與行距之間的和。
line-height定義
line-height 屬性設置行間的距離（行高）。
註釋：不允許使用負值。
JavaScript 語法： | object.style.lineHeight="2" |
line-height參數設置
值 | 描述 |
|---|---|
normal | 默認。設置合理的行間距。 |
number | 設置數字，此數字會與當前的字體尺寸相乘來設置行間距。 |
length | 設置固定的行間距。 |
% | 基於當前字體尺寸的百分比行間距。 |
inherit | 規定應該從父元素繼承 line-height 屬性的值。 |
瀏覽器支持
所有瀏覽器都支持 line-height 屬性。
line-height説明
檢索或設置對象的行高。即字體最底端與字體內部頂端之間的距離。
如行內包含多個對象，則應用最大行高。此時行高不可為負值。
對應的腳本特性為lineHeight。請參閲我編寫的其他書目。
該屬性會影響行框的佈局。在應用到一個塊級元素時，它定義了該元素中基線之間的最小距離而不是最大距離。
line-height 與 font-size 的計算值之差（在 CSS 中成為“行間距”）分為兩半，分別加到一個文本行內容的頂部和底部。可以包含這些內容的最小框就是行框。
line-height示例
div {line-height:6px; }
div {line-height:10.5em; }
line-height注意
1.用line-height只對文字起作用 對於圖片時失效
2.用dreamweaver 可以看到即時的line-height 的效果
3.該值不能使用負值，使用了也無效的
需要注意的是,在各瀏覽器下對於line-height的解決也是有細微的區別的,上下會有1px的差別,如果行高是偶數的話,大部分瀏覽器解釋還是比較正常,如果是奇數的話,有些瀏覽器會上比下多1px,而另一些瀏覽器會下比上多1px,對於有些要求比較嚴格的網站,建議行高設計時用偶數
line-height實例
本例演示如何使用像素值來設置段落中的行間距。
<html>
<head>
<style type="text/css">
p.small {line-height: 90%}
p.big {line-height: 200%}
</style>
</head>
<body>
<p>
這是擁有標準行高的段落。
在大多數瀏覽器中默認行高大約是 110% 到 120%。
這是擁有標準行高的段落。
這是擁有標準行高的段落。
這是擁有標準行高的段落。
這是擁有標準行高的段落。
這是擁有標準行高的段落。
<p class="small">
這個段落擁有更小的行高。
這個段落擁有更小的行高。
這個段落擁有更小的行高。
這個段落擁有更小的行高。
這個段落擁有更小的行高。
這個段落擁有更小的行高。
這個段落擁有更小的行高。
<p class="big">
這個段落擁有更大的行高。
這個段落擁有更大的行高。
這個段落擁有更大的行高。
這個段落擁有更大的行高。
這個段落擁有更大的行高。
這個段落擁有更大的行高。
這個段落擁有更大的行高。
</body>
</html>
- 參考資料
-
- 1. CSS line-height 屬性 ．w3school[引用日期2012-11-07]
