CSS 行高 - 绿叶网

在 CSS 中，我们可以使用 line-height 属性来定义文本的行高。注意这里的 “行高” 是每行文本的高度，而不是总高度。

语法：

line-height: 数值;

说明：

line-height 的取值是一个数值，可以是数字、长度值（如像素 px、em、rem）、百分比或者关键字 normal。

数字：设置行高为字体大小的倍数。
长度值：用固定的值设置行高。
百分比：基于字体大小的百分比设置行高。
normal：默认值，浏览器会设置一个合理的行高。

line-height 和 height 是两个完全不同的属性，它们之间的区别如下。

line-height：用于定义元素中文本行与行之间的间距。它通常用于调整文本的垂直间距，或者实现单行文本的垂直居中。
height：用于定义元素本身的高度。它用于精确控制元素的高度，比如设置容器的高度、图片的高度等。

示例 1：CSS 定义文本的行高

运行代码

<!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>

页面效果如下图所示。

CSS 定义文本的行高

示例 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）的使用技巧

分析：

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