line-height屬性定義及用法
在css中,line-height屬性是使用來設置行高,即設置行間的距離。所以瀏覽器都支持該屬性,但是任何的版本的Internet Explorer(包括 IE8)都不支持屬性值"inherit";
說明
該屬性會影響行框的布局。在應用到一個塊級元素時,它定義了該元素中基線之間的最小距離而不是最大距離;line-height 與 font-size 的計算值之差(在 CSS 中成為「行間距」)分為兩半,分別加到一個文本行內容的頂部和底部。可以包含這些內容的最小框就是行框;原始數字值指定了一個縮放因子,後代元素會繼承這個縮放因子而不是計算值;line-height屬性語法格式
css語法:line-height:normal/number/length/%/inherit;JavaScript語法:object.style.lineHeight="2";line-height屬性值說明
normal:默認,設置合理的行間距;number:設置數字,此數字會與當前的字體尺寸相乘來設置行間距;length:設置固定的行間距;%:基於當前字體尺寸的百分比行間距;inherit:規定應該從父元素繼承 line-height 屬性的值;實例:
<!DOCTYPE html><html><head><meta charset="utf-8" />
<title>css line-height屬性設置行高</title>
<style type="text/css">.small {line-height:80%;}.big {line-height:180%;}</style>
</head><body><p>這是一個標準行高的段落。<br>
這是一個標準行高的段落。<br>這是一個標準行高的段落。<br></p>
<p>這是一個更小行高的段落。<br>
這是一個更小行高的段落。<br>這是一個更小行高的段落。<br></p>
<p>這是一個更大行高的段落。<br>
這是一個更大行高的段落。<br>這是一個更大行高的段落。<br></p>
</body></html>
運行結果: