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 属性")