CSS line-height 属性

Set the line height in percent:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    p.small {
      line-height: 70%;
    }

    p.big {
      line-height: 200%;
    }
  </style>
</head>

<body>
  <p>
    这是一个标准行高的段落。<br> 这是一个标准行高的段落。
    <br> 大多数浏览器的默认行高约为110%至120%。
    <br>
  </p>

  <p class="small">
    这是一个更小行高的段落。<br> 这是一个更小行高的段落。
    <br> 这是一个更小行高的段落。
    <br> 这是一个更小行高的段落。
    <br>
  </p>

  <p class="big">
    这是一个更大行高的段落。<br> 这是一个更大行高的段落。
    <br> 这是一个更大行高的段落。
    <br> 这是一个更大行高的段落。
    <br>
  </p>

</body>
</html>

尝试一下 »

属性定义及使用说明

设置以百分比计的行高：.

注意： 负值是不允许的

默认值： normal
继承： yes
版本： CSS1
JavaScript 语法： object.style.lineHeight="2"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
line-height 1.0 4.0 1.0 1.0 7.0

属性值

值 描述
normal 默认。设置合理的行间距。
number 设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
length 设置固定的行间距。
% 基于当前字体尺寸的百分比行间距。
inherit 规定应该从父元素继承 line-height 属性的值。

更多实例

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    p.small {
      line-height: 10px
    }

    p.big {
      line-height: 30px
    }
  </style>
</head>
<body>

  <p>
    这是一个标准行高的段落。 在大多数浏览器默认行高约20 px。 这是一个标准行高的段落。 这是一个标准行高的段落。
  </p>

  <p class="small">
    这是一个更小行高的段落。 这是一个更小行高的段落。 这是一个更小行高的段落。 这是一个更小行高的段落。
  </p>

  <p class="big">
    这是一个更大行高的段落。 这是一个更大行高的段落。 这是一个更大行高的段落。 这是一个更大行高的段落。
  </p>

</body>
</html>

尝试一下 »

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

<!DOCTYPE html>
<html>
<head>
  <style>
    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 Text