CSS text-indent 语法
在 CSS 中，text-indent 属性用于定义元素内首行文本的缩进距离。
语法：
text-indent: 长度值或百分比;说明：
text-indent 的取值有以下 2 种。
- 长度值：可以使用具体的长度单位，如像素（px）、厘米（cm）、毫米（mm）、英寸（in）、点（pt）、或相对单位如 em、rem 等。
- 百分比：相对于父元素宽度的百分比。例如，text-indent: 10%; 表示首行缩进父元素宽度的 10%。
注意:
- text-indent 只对块级元素生效，对行内元素无效。
- text-indent 可以取负值。如果值为负数，则首行文本向左缩进，从而创建 “悬挂缩进” 效果。
CSS text-indent 摘要
| 属于 | CSS 首行缩进 |
|---|---|
| 使用频率 | 高 |
| 是否继承 | 是 |
| 默认值 | 0 |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
CSS text-indent 示例
接下来，我们通过一个简单的例子来讲解一下 CSS text-indent 属性是如何使用的。
示例 1：text-indent 实现首行缩进
<!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>页面效果如下图所示。
分析：
我们都知道，中文段落首行一般需要缩进两个字的空间。想要实现这个效果，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 了。这是一个非常棒的技巧！
提示: text-indent: 2em; 是中文网页中最常见的首行缩进设置，可以用于模拟书籍效果，广泛用于博客、新闻或小说页面。
示例 2：text-indent 实现 “悬挂缩进”
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p {
text-indent: -32px;
padding-left: 32px;
font-size: 16px;
}
</style>
</head>
<body>
<h3>爱莲说</h3>
<p>水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。</p>
<p>予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后鲜有闻；莲之爱，同予者何人? 牡丹之爱，宜乎众矣。</p>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，我们给 text-indent 属性设置了负值。text-indent: -32px; 表示将首行向左偏移 32px，然后 padding-left: 32px; 是为了确保容器有足够空间来包含文本。
当 text-indent 属性取值为负值时，会创建 “悬挂缩进” 效果。这种效果常用于学术论文、参考文献、法律条款等。
