在设计中，文本排版是塑造用户体验的核心要素之一。而 `text-indent` 属性作为CSS中控制段落起始位置的关键工具，其重要性常被低估。本文将深入探讨文本缩进的方方面面，助你掌握这一看似简单却蕴含玄机的排版技术。
一、text-indent 基础探秘
`text-indent` 专门用于设置块级元素首行文本的缩进距离，是构建段落视觉结构的基石。
css
/ 基本语法 /
p {
text-indent: 2em; / 首行缩进2个字符宽度 /
关键特性：
> 专业洞察：缩进本质是增加首行前的“空白间距”，而非移动文本位置。理解这一点对处理复杂布局至关重要。
二、单位系统详解与应用场景
不同单位带来截然不同的缩进效果：
css
/ 常用单位示例 /
example {
text-indent: 30px; / 固定像素值 /
text-indent: 5%; / 相对于父容器宽度 /
text-indent: 2em; / 相对于当前字体大小 /
text-indent: 3rem; / 相对于根元素字体大小 /
text-indent: 4ch; / 基于“0”字符宽度 /
单位选择建议：
css
/ 响应式缩进最佳实践 /
article p {
text-indent: clamp(1.5rem, 3vw, 2.5rem); / 动态范围限制 /
三、负值缩进：悬挂缩进技术
负缩进创造独特的悬挂效果，适用于编号列表、引用块等场景：
css
blockquote {
padding-left: 1.5em;
text-indent: -1.5em; / 首行向左突出 /
实际应用案例：
html
- 1. 设计心理学, 2023
- 2. CSS权威指南, 第四版
> 避坑提示：负缩进需配合`padding-left`使用，否则文本可能溢出容器！
四、继承机制与特殊场景处理
`text-indent` 的继承特性可能导致意外效果：
css
div { text-indent: 2em; }
div p { text-indent: 0; } / 显式重置继承 /
特殊元素注意事项：