CSS line-height 屬性 · W3School CSS 參考手冊

# CSS line-height 屬性 ## 實例設置以百分比計的行高： ``` p.small {line-height:90%} p.big {line-height:200%} ``` （可以在頁面底部查看更多實例） ## 瀏覽器支持 | IE | Firefox | Chrome | Safari | Opera | | --- | --- | --- | --- | --- | 所有瀏覽器都支持 line-height 屬性。注釋：任何的版本的 Internet Explorer （包括 IE8）都不支持屬性值 "inherit"。 ## 定義和用法 line-height 屬性設置行間的距離（行高）。注釋：不允許使用負值。 ### 說明該屬性會影響行框的布局。在應用到一個塊級元素時，它定義了該元素中基線之間的最小距離而不是最大距離。 line-height 與 font-size 的計算值之差（在 CSS 中成為“行間距”）分為兩半，分別加到一個文本行內容的頂部和底部。可以包含這些內容的最小框就是行框。原始數字值指定了一個縮放因子，后代元素會繼承這個縮放因子而不是計算值。 | 默認值： | normal | | --- | --- | | 繼承性： | yes | | --- | --- | | 版本： | CSS1 | | --- | --- | | JavaScript 語法： | _object_.style.lineHeight="2" | | --- | --- | ## 可能的值 | 值 | 描述 | | --- | --- | | normal | 默認。設置合理的行間距。 | | _number_ | 設置數字，此數字會與當前的字體尺寸相乘來設置行間距。 | | _length_ | 設置固定的行間距。 | | _%_ | 基于當前字體尺寸的百分比行間距。 | | inherit | 規定應該從父元素繼承 line-height 屬性的值。 | ## TIY 實例 [使用百分比設置行間距](/tiy/t.asp?f=csse_dim_line-height_percent) 本例演示如何使用百分比值來設置段落中的行間距。 ``` <html> <head> <style type="text/css"> p.small {line-height: 90%} p.big {line-height: 200%} </style> </head> <body> <p> 這是擁有標準行高的段落。在大多數瀏覽器中默認行高大約是 110% 到 120%。這是擁有標準行高的段落。這是擁有標準行高的段落。這是擁有標準行高的段落。這是擁有標準行高的段落。這是擁有標準行高的段落。 </p> <p class="small"> 這個段落擁有更小的行高。這個段落擁有更小的行高。這個段落擁有更小的行高。這個段落擁有更小的行高。這個段落擁有更小的行高。這個段落擁有更小的行高。這個段落擁有更小的行高。 </p> <p class="big"> 這個段落擁有更大的行高。這個段落擁有更大的行高。這個段落擁有更大的行高。這個段落擁有更大的行高。這個段落擁有更大的行高。這個段落擁有更大的行高。這個段落擁有更大的行高。 </p> </body> </html> ``` [使用像素值設置行間距](/tiy/t.asp?f=csse_dim_line-height_pixel) 本例演示如何使用像素值來設置段落中的行間距。 ``` <html> <head> <style type="text/css"> p.small { line-height: 10px } p.big { line-height: 30px } </style> </head> <body> <p> 這是擁有標準行高的段落。在大多數瀏覽器中默認行高大約是 20px。這是擁有標準行高的段落。這是擁有標準行高的段落。這是擁有標準行高的段落。這是擁有標準行高的段落。這是擁有標準行高的段落。 </p> <p class="small"> 這個段落擁有更小的行高。這個段落擁有更小的行高。這個段落擁有更小的行高。這個段落擁有更小的行高。這個段落擁有更小的行高。這個段落擁有更小的行高。這個段落擁有更小的行高。 </p> <p class="big"> 這個段落擁有更大的行高。這個段落擁有更大的行高。這個段落擁有更大的行高。這個段落擁有更大的行高。這個段落擁有更大的行高。這個段落擁有更大的行高。這個段落擁有更大的行高。 </p> </body> </html> ``` [使用數值來設置行間距](/tiy/t.asp?f=csse_dim_line-height_number) 本例演示如何使用一個數值來設置段落中的行間距。 ``` <html> <head> <style type="text/css"> p.small { line-height: 0.5 } p.big { line-height: 2 } </style> </head> <body> <p> 這是擁有標準行高的段落。默認行高大約是 1。這是擁有標準行高的段落。這是擁有標準行高的段落。這是擁有標準行高的段落。這是擁有標準行高的段落。這是擁有標準行高的段落。 </p> <p class="small"> 這個段落擁有更小的行高。這個段落擁有更小的行高。這個段落擁有更小的行高。這個段落擁有更小的行高。這個段落擁有更小的行高。這個段落擁有更小的行高。這個段落擁有更小的行高。 </p> <p class="big"> 這個段落擁有更大的行高。這個段落擁有更大的行高。這個段落擁有更大的行高。這個段落擁有更大的行高。這個段落擁有更大的行高。這個段落擁有更大的行高。這個段落擁有更大的行高。 </p> </body> </html> ``` ## 相關頁面 CSS 教程：[CSS 文本](/css/css_text.asp "CSS 文本") HTML DOM 參考手冊：[lineHeight 屬性](/jsref/prop_style_lineheight.asp "HTML DOM lineHeight 屬性")