CSS line-height 属性

实例

设置以百分比计的行高：

  1. p.small {line-height:90%}
  2. p.big {line-height:200%}

（可以在页面底部查看更多实例）

浏览器支持


IE Firefox Chrome Safari Opera
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 属性的值。

实例

使用百分比设置行间距

本例演示如何使用百分比值来设置段落中的行间距。 

  1. <html>
  3. <head>
  4. <style type="text/css">
  5. p.small {line-height: 90%}
  6. p.big {line-height: 200%}
  7. </style>
  8. </head>
  10. <body>
  12. <p>
  13. 这是拥有标准行高的段落。
  14. 在大多数浏览器中默认行高大约是 110% 到 120%。
  15. 这是拥有标准行高的段落。
  16. 这是拥有标准行高的段落。
  17. 这是拥有标准行高的段落。
  18. 这是拥有标准行高的段落。
  19. 这是拥有标准行高的段落。
  20. </p>
  22. <p class="small">
  23. 这个段落拥有更小的行高。
  24. 这个段落拥有更小的行高。
  25. 这个段落拥有更小的行高。
  26. 这个段落拥有更小的行高。
  27. 这个段落拥有更小的行高。
  28. 这个段落拥有更小的行高。
  29. 这个段落拥有更小的行高。
  30. </p>
  32. <p class="big">
  33. 这个段落拥有更大的行高。
  34. 这个段落拥有更大的行高。
  35. 这个段落拥有更大的行高。
  36. 这个段落拥有更大的行高。
  37. 这个段落拥有更大的行高。
  38. 这个段落拥有更大的行高。
  39. 这个段落拥有更大的行高。
  40. </p>
  42. </body>
  43. </html>

使用像素值设置行间距

本例演示如何使用像素值来设置段落中的行间距。 

  1. <html>
  3. <head>
  4. <style type="text/css">
  5. p.small
  6.   {
  7.   line-height: 10px
  8.   }
  9. p.big
  10.   {
  11.   line-height: 30px
  12.   }
  13. </style>
  14. </head>
  16. <body>
  18. <p>
  19. 这是拥有标准行高的段落。
  20. 在大多数浏览器中默认行高大约是 20px。
  21. 这是拥有标准行高的段落。
  22. 这是拥有标准行高的段落。
  23. 这是拥有标准行高的段落。
  24. 这是拥有标准行高的段落。
  25. 这是拥有标准行高的段落。
  26. </p>
  28. <p class="small">
  29. 这个段落拥有更小的行高。
  30. 这个段落拥有更小的行高。
  31. 这个段落拥有更小的行高。
  32. 这个段落拥有更小的行高。
  33. 这个段落拥有更小的行高。
  34. 这个段落拥有更小的行高。
  35. 这个段落拥有更小的行高。
  36. </p>
  38. <p class="big">
  39. 这个段落拥有更大的行高。
  40. 这个段落拥有更大的行高。
  41. 这个段落拥有更大的行高。
  42. 这个段落拥有更大的行高。
  43. 这个段落拥有更大的行高。
  44. 这个段落拥有更大的行高。
  45. 这个段落拥有更大的行高。
  46. </p>
  48. </body>
  49. </html>

使用数值来设置行间距

本例演示如何使用一个数值来设置段落中的行间距。 

  1. <html>
  3. <head>
  4. <style type="text/css">
  5. p.small
  6. {
  7. line-height: 0.5
  8. }
  9. p.big
  10. {
  11. line-height: 2
  12. }
  13. </style>
  14. </head>
  16. <body>
  18. <p>
  19. 这是拥有标准行高的段落。
  20. 默认行高大约是 1。
  21. 这是拥有标准行高的段落。
  22. 这是拥有标准行高的段落。
  23. 这是拥有标准行高的段落。
  24. 这是拥有标准行高的段落。
  25. 这是拥有标准行高的段落。
  26. </p>
  28. <p class="small">
  29. 这个段落拥有更小的行高。
  30. 这个段落拥有更小的行高。
  31. 这个段落拥有更小的行高。
  32. 这个段落拥有更小的行高。
  33. 这个段落拥有更小的行高。
  34. 这个段落拥有更小的行高。
  35. 这个段落拥有更小的行高。
  36. </p>
  38. <p class="big">
  39. 这个段落拥有更大的行高。
  40. 这个段落拥有更大的行高。
  41. 这个段落拥有更大的行高。
  42. 这个段落拥有更大的行高。
  43. 这个段落拥有更大的行高。
  44. 这个段落拥有更大的行高。
  45. 这个段落拥有更大的行高。
  46. </p>
  48. </body>
  49. </html>

相关页面

CSS 教程：CSS 文本

HTML DOM 参考手册：lineHeight 属性