text-indent: 2ch 是最接近“两个字符”缩进的选择，因其基于“0”字符宽度且与汉字视觉宽度一致，但 ie11 及更早版本不支持，ios safari 12 前存在计算偏差；而 2em 并非等同于两字宽，受 font-size 和字体影响显著，且在 flex 子项、inline 元素、justify 对齐单行、盒模型干扰或 white-space: nowrap 等场景下易失效；padding-left 会整体偏移，破坏首行缩进语义，应避免混用；排查时应优先检查 computed 样式与 display 类型及盒模型状态。
text-indent: 2ch 是最接近“两个字符”的选择
它基于当前字体中 "0" 字符的宽度，多数中文字体（如思源黑体、微软雅黑、苹方）里 "0" 和汉字视觉宽度基本一致，所以 text-indent: 2ch 在现代浏览器中表现最稳。但要注意：ch 单位在 IE11 及更早版本完全不支持；iOS Safari 12 之前对 ch 的计算也有偏差，比如系统字体 -apple-system 下可能只缩进约 1.8 个汉字宽。
为什么 text-indent: 2em 常被误用
text-indent: 2em 缩进的是当前元素 font-size 的两倍，不是两个汉字宽度。例如：
- 若
font-size: 16px，则2em = 32px，而一个宋体汉字实际渲染宽度约 15–17px，两个就是 30–34px —— 看似接近，但换到font-size: 14px或字体换成"KaiTi"就明显偏小 - 在 Flex 容器子项中即使设了
display: block，text-indent也可能被忽略，因为 flex item 的文本布局由justify-content主导 - 如果段落内首行为
<img>或<span class="icon"></span>这类 inline 元素，text-indent不会推动它们，只影响其后的纯文本起始位置
哪些情况会让 text-indent 看起来“没生效”
真正失效的原因往往不是写法错，而是上下文不符合块级格式化要求：
-
<span></span>、<a></a>等默认display: inline元素加text-indent→ 必须显式设display: block或inline-block - 父容器设置了
text-align: justify且段落只有一行 → 浏览器为对齐末尾可能强制取消首行缩进 - 段落本身有
margin-left或外层容器有padding-left→ 视觉上叠加干扰，需检查盒模型并重置：margin-left: 0; padding-left: 0; - 使用了
white-space: nowrap或pre类行为 → 文本无法换行，“首行”概念失效
别用 padding-left 替代 text-indent
padding-left 作用于整个内容区，会导致整段文字左移，首行不再“额外”缩进；而 text-indent 只动第一行，后续行左边界保持原样——这是中文排版的语义本质。若混用二者，会出现双倍缩进或错位。真要整体偏移，请改用 margin-left 或包裹容器控制，而不是在段落上叠加工具式样式。
真正麻烦的地方不在单位选 em 还是 ch，而在确认元素是否处于块级上下文、是否被父级对齐或白空间行为劫持。打开开发者工具，看 computed 样式里 text-indent 是否为预期值，并点开 layout 面板确认 display 类型和盒模型状态——这比反复调数值更有效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
