在CSS中设置中文段落首行缩进两个字符，通常不需要借助多个空格或占位符，直接使用 text-indent 属性就能稳定实现。这个属性可以控制块级元素第一行文本距离容器内容区左侧的偏移量，当取值设置为 2em 时，偏移长度刚好等于当前字体大小的两倍。对多数中文字体来说，一个汉字的宽度约等于 1em，所以 2em 就对应两个汉字的缩进距离。相比使用 手动补空格，CSS方式不会受到字体、字号和换行的影响，维护起来也更方便。
接下来会从 text-indent 的基础语法、单位选择、不同HTML结构下的写法以及常见踩坑点几个方面把这块知识梳理清楚。
text-indent 的基础语法和生效范围
text-indent 的语法很简单，可以在任意块级元素上使用。它接受长度值、百分比值和全局关键字。默认值是 0，表示没有首行缩进。通常写法是：
p {
text-indent: 2em;
}
这段代码表示给页面中所有 <p> 元素设置首行缩进。设置后，每个段落的第一行会向右缩进 2em，其余行保持原有位置。这种效果只对块级容器生效，如果你把 text-indent 写在 <span> 这样的行内元素上，浏览器不会把它扩展成块级盒，缩进也就不会出现。
另外，text-indent 是可以被继承的属性。父元素设置缩进后，子元素会继承计算后的缩进值。这个特性在控制整篇文章时很方便，但也会带来列表、标题等子元素被一并缩进的问题，后文会单独说明。如果属性值写成百分比，例如 text-indent: 5%;，它是相对于包含块内容区宽度计算的，容器宽度变化时首行缩进也会跟着变化。因此百分比不适合精确控制两个字符的缩进，更适合做响应式版式中的比例留白。
为什么推荐 2em 而不是 2ch 或固定像素
对中文排版来说，设置两个字符缩进最常用的单位是 em。因为 1em 等于当前元素的 font-size，而汉字默认是等宽表意字符，在绝大多数中文字体里，一个汉字的宽度与 1em 基本一致。所以 2em 天然对应两个汉字的宽度。当段落字号从 14px 改成 16px 时，缩进会自动从 28px 增长到 32px，始终保持两个字的距离。
ch 单位也很常见，它表示当前字体中数字 0 的宽度。某些教程会推荐 2ch 作为两个字符的缩进，但在中文字体中 ch 并不总等于汉字宽度。不同字体和字重下，数字 0 的字宽可能比汉字窄，导致实际缩进不足两个汉字。如果是西文内容为主的场景，ch 对等宽字体更有参考价值。而 px 这种绝对单位虽然看起来直观，但需要同时维护字号和缩进两处数值，字号一改就要重新计算，明显增加维护成本。
下面把几种常见写法放在一起对比：
p {
text-indent: 2em; /* 推荐，适合中文排版 */
}
p {
text-indent: 2ch; /* 西文等宽场景更合适 */
}
p {
text-indent: 32px; /* 固定像素，修改字号后需要重新计算 */
}
p {
text-indent: 2rem; /* 相对根字号，容易受全局字体大小影响 */
}
从实际项目看，正文段落直接使用 text-indent: 2em; 是最省心的做法。如果页面采用了 rem 布局，也可以把 text-indent 设置成与字号相同基准的 em 值，缩进会跟随局部字号自动适配。
实际页面中的具体设置方式
如果你只需要让文章正文的段落产生首行缩进，可以直接在样式表里添加下面这段规则：
.article p {
text-indent: 2em;
line-height: 1.8;
margin: 0 0 12px;
}
配合 line-height 和 margin 使用，能获得更好的段落间距。HTML结构不需要任何额外改动，继续使用普通的 <p> 标签即可：
<div class="article"> <p>这是第一段正文，首行会自动缩进两个汉字。</p> <p>这是第二段正文，同样保持相同的缩进规则。</p> </div>
如果想只在某个特定段落生效，可以使用类选择器或内联样式。内联样式虽然不推荐作为大规模维护方案，但在富文本编辑器或邮件模板中仍然有用：
<p style="text-indent: 2em;">这段文字会缩进两个字符。</p>
还有一种需求是首行悬挂缩进，即第一行伸出左侧，其余行缩进。这并不等同于常规的段首缩进，但很多项目会混淆。悬挂缩进可以写成 text-indent: -2em; padding-left: 2em;，第一行会从容器左边界开始，后面行整体缩进两个字符。这个技巧在参考文献、列表说明等场景频繁出现，也可以在维护基础样式时留意区分。
容易忽略的继承、重置和兼容性问题
text-indent 的继承特性会造成一个常见问题：如果给外层容器 <div> 设置了 text-indent: 2em;，里面的 <h2>、<li>、<blockquote> 等子元素也会继承这个缩进。结果就是标题莫名其妙缩进两个字符，列表项首行出现偏移。解决办法是对不需要缩进的元素单独重置：
.article {
text-indent: 2em;
}
.article h2,
.article h3,
.article li,
.article blockquote {
text-indent: 0;
}
另一个常见的误区是用 margin-left 或 padding-left 来代替首行缩进。这两种属性作用于整个元素盒模型，会把整段文字整体右移，而不是只移动第一行。如果需求是传统印刷体的首行缩进，应该优先使用 text-indent。但某些列表样式为了对齐，则需要结合 padding-left 和 text-indent 一起调整，具体看设计规范。
兼容性方面，text-indent 得到了所有现代浏览器和移动端浏览器的完整支持，可以放心使用。需要注意的是，个别旧版浏览器对 ch 单位的解析存在差异，如果项目需要覆盖较老的设备，建议统一使用 em。对于响应式页面，不要在媒体查询中频繁修改缩进值，保持与字号成比例即可。
CSS首行缩进text-indent文本缩进修改时间：2026-09-25 02:52:30