CSS line-height 属性

CSS line-height 语法

在 CSS 中，line-height 属性用于文本的行高。注意这里的 “行高” 是每行文本的高度，而不是总高度。

语法：

line-height: 数值;

说明：

line-height 的取值是一个数值，比如纯数字（无单位）、像素值（px）、百分比（%）、em、rem 等。

在大多数情况下，推荐使用无单位的数字（如 line-height: 1.5;），因为它可以避免继承时产生的计算问题，让子元素根据自己的字号（font-size）自动计算行高。

CSS line-height 摘要

属于	CSS 行高
使用频率	高
是否继承	是
默认值	normal
兼容性	查看
官方文档	查看
MDN	查看

CSS line-height 示例

接下来，我们通过一个简单的例子来讲解一下 CSS line-height 属性是如何使用的。

示例 1：line-height 作用于文本

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        div {
            width: 500px;
            padding: 10px;
            border: 1px dashed gray;
        }
        p:nth-of-type(1) { line-height: 15px; }
        p:nth-of-type(2) { line-height: 25px; }
        p:nth-of-type(3) { line-height: 35px; }
    </style>
</head>
<body>
    <div>
        <p>水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。</p><hr/>
        <p>水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。</p><hr/>
        <p>水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。</p>
    </div>
</body>
</html>

页面效果如下图所示。

line-height作用于文本

深入了解 line-height

在 CSS 中，我们可以定义 height 和 line-height 这两个属性的值相等，从而实现单行文字的垂直居中，这是经常用到的一个技巧。

示例 2：line-height 的使用技巧

运行代码

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        div {
            width: 300px;
            height: 100px;
            border: 1px solid gray;
            font-size: 12px;
            text-align: center;
        }
        #div1 { line-height: 50px; }
        #div2 { line-height: 80px; }
        #div3 { line-height: 100px; }
    </style>
</head>
<body>
    <div id="div1">height为100px，line-height为50px</div>
    <div id="div2">height为100px，line-height为80px</div>
    <div id="div3">height为100px，line-height为100px</div>
</body>
</html>

页面效果如下图所示。

line-height的使用技巧