line-height

定义

line-height 属性设置行间的距离（行高）。

注意：该属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。

不允许使用负值。

语法

line-height:normal|number|length|%|inherit;

属性值

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

实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>NTHOME-零基础入门学习Web（HTML5+CSS3）</title>
    <style>
</head>
<body>
   <p>
       这是拥有标准行高的段落。
       在大多数浏览器中默认行高大约是 110% 到 120%。
       这是拥有标准行高的段落。
       这是拥有标准行高的段落。
       这是拥有标准行高的段落。
       这是拥有标准行高的段落。
       这是拥有标准行高的段落。
   </p>
   <br>
   <p class="small">
       这个段落拥有更小的行高。
       这个段落拥有更小的行高。
       这个段落拥有更小的行高。
       这个段落拥有更小的行高。
       这个段落拥有更小的行高。
       这个段落拥有更小的行高。
       这个段落拥有更小的行高。
   </p>
   <br>
   <p class="big">
       这个段落拥有更大的行高。
       这个段落拥有更大的行高。
       这个段落拥有更大的行高。
       这个段落拥有更大的行高。
       这个段落拥有更大的行高。
       这个段落拥有更大的行高。
       这个段落拥有更大的行高。
   </p>
</body>
</html>

这是拥有标准行高的段落。在大多数浏览器中默认行高大约是 110% 到 120%。这是拥有标准行高的段落。这是拥有标准行高的段落。这是拥有标准行高的段落。这是拥有标准行高的段落。这是拥有标准行高的段落。

这个段落拥有更小的行高。这个段落拥有更小的行高。这个段落拥有更小的行高。这个段落拥有更小的行高。这个段落拥有更小的行高。这个段落拥有更小的行高。这个段落拥有更小的行高。

这个段落拥有更大的行高。这个段落拥有更大的行高。这个段落拥有更大的行高。这个段落拥有更大的行高。这个段落拥有更大的行高。这个段落拥有更大的行高。这个段落拥有更大的行高。

浏览器支持

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

Safari	Chrome	FireFox	IE
1.0	1.0	1.0	8.0