在中文网页排版中，段落首行缩进两个字符是最基本的阅读习惯。CSS里真正负责这件事的属性是text-indent，它能在不插入任何空格字符的情况下，让块级元素的第一行向右偏移指定距离。理解它的取值单位和继承特性，是实现精确控制的核心。
一、text-indent的基本用法
text-indent应用于块级元素，规定首行文本之前的空白长度。最常见的中文场景是缩进两个汉字，直接用相对单位em即可。em相对于当前元素的字体大小，因此缩进量会随字号变化，非常适合多终端适配。
下面的代码让所有段落首行缩进两个汉字宽度：
p {
text-indent: 2em;
}
这里2em表示两个字符宽。如果字体是16px，2em就是32px。相比在HTML里写四个空格或半角空格，text-indent不会被换行或字体替换破坏，也不会被屏幕阅读器当作内容读出。
二、不同单位的精确控制对比
除了em，text-indent还支持px、rem、百分比等。px是绝对像素，在固定设计稿里直观，但用户放大字体时缩进不会跟着变，中文阅读体验会变差。rem基于根元素字号，适合全局统一节奏。百分比则相对包含块宽度，在中文段落里极少用，因为容器变窄时缩进会剧烈缩小。
我们用一个对照表看差异：
| 单位 | 参考基准 | 中文段落适用性 |
|---|---|---|
| em | 当前元素字体大小 | 最佳，随字缩放 |
| rem | 根元素字体大小 | 良好，全局统一 |
| px | 固定像素 | 较差，不响应字号 |
| % | 包含块宽度 | 差，易失控 |
从控制和可维护性看，中文正文优先em。若整站使用统一排版尺度，rem也不错。下面示例展示混排中英文时em的优势：
.article p {
font-size: 18px;
text-indent: 2em; /* 无论中英文，均缩进36px */
}
当一段里中英文混排，em保证缩进恒等于两个当前字号字符，不会出现中文缩两格、英文缩一格的违和感。
三、继承陷阱与列表重置
text-indent是可继承属性。父元素设了2em，子块级元素如果不覆盖，首行也会缩进。这在普通段落没问题，但碰到ul、ol里的li，或者卡片内的小标题，往往不需要缩进，否则排版会奇怪地右移。
实践中常在通用规则后做重置：
p {
text-indent: 2em;
}
/* 列表项不缩进 */
li {
text-indent: 0;
}
/* 卡片内标题不缩进 */
.card-title {
text-indent: 0;
}
另一个坑是inline-block或flex子项不会继承text-indent，因为只有块级盒的首行生效。若用div包了一段文本又设display:flex，缩进将失效，此时应改回块级或给内部文本包一层p。
四、响应式与极端情况处理
在移动端，有时首行缩进会显得拥挤。可以通过媒体查询减小缩进，或极小屏直接去掉。注意用em仍是最稳的，不要写死px。
@media (max-width: 480px) {
p {
text-indent: 1.5em;
}
}
如果段落首字是浮动元素或绝对定位图标，text-indent依然只认文本流首行，不会因图标偏移。需要图文混排缩进时，可把图标用margin挤开，而非依赖text-indent。掌握这些细节，中文段落首行缩进就能做到精准、健壮、易维护。
CSStext-indent中文排版修改时间：2026-08-07 11:54:15