CSS 首行缩进 - 绿叶网

在 CSS 中，我们可以使用 text-indent 属性来定义元素内首行文本的缩进距离。

语法：

text-indent: 数值;

说明：

text-indent 的值是一个数值，比如像素值（px）、百分比（%）、rem 等。大多数情况下，都是使用像素值。

注意:

text-indent 可以取负值。如果值为负数，则首行文本向左缩进。
text-indent 属性只对块级元素有效，对行内元素是无效的。

示例：CSS 定义首行缩进

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        p {
            font-size: 16px;
            text-indent: 32px;
        }
    </style>
</head>
<body>
    <h3>爱莲说</h3>
    <p>水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。</p>
    <p>予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后鲜有闻；莲之爱，同予者何人 ? 牡丹之爱，宜乎众矣。</p>
</body>
</html>

页面效果如下图所示。

CSS 首行缩进示例

分析：

我们都知道，中文段落首行一般需要缩进两个字的空间。想要实现这个效果，text-indent 值应该是 font-size 值的 2 倍。小伙伴们仔细琢磨一下上面这个例子就知道为什么了。这是一个很棒的小技巧，在实际开发中经常会用到。

咱们再进一步思考：如果每次改变 font-size 值，text-indent 值岂不是又要计算一遍？比如设置 font-size 为 20px，则 text-indent 就要改为 40px。实际上，我们还有一个更简单的办法，就是直接将 text-indent 的值设置为 2em，也就是：

text-indent: 2em;

text-indent: 2em; 表示将 text-indent 值设置为当前元素 font-size 值的 2 倍。此时不管 font-size 值如何改变，都不需要手动去设置 text-indent 了。这是一个非常棒的技巧！