text-indent: 2em是最直接可靠的做法，因其基于当前font-size自适应缩放，在主流中文字体下视觉接近两汉字宽，兼容性好且响应式；而2ch浏览器支持不一，px值在缩放时失准。
text-indent: 2em 是最直接、最可靠的做法，它在绝大多数中文网页场景下能稳定实现视觉上接近“两个汉字宽度”的首行缩进。
为什么是 2em 而不是 2ch 或像素值
浏览器对 ch 单位的支持仍不统一：Safari 完全不支持 text-indent: 2ch，Chrome 120+ 才开始稳定，上线前查 caniuse 很容易踩坑；24px 或 32px 这类固定值在用户开启系统缩放、高 DPI 屏幕或响应式字号变化时会明显失准——比如 zoom 150% 后，32px 缩进实际只剩视觉上不到一字符宽。
2em 的优势在于它基于当前元素的 font-size 计算：16px 字号下 ≈ 32px，20px 下 ≈ 40px，始终维持“两倍字号”比例，在微软雅黑、思源黑体、Noto Sans SC 等主流中文字体下视觉误差极小。
- 若用等宽中文字体（如
"Fira Code"），可试text-indent: 4ch（因一个中文字符通常占 2ch），但必须确认目标环境支持 - 微调场景下，
1.8em或2.2em比整数更贴合某些字体渲染（如轻字重+小字号组合）
text-indent 不生效的三个高频原因
写了 text-indent: 2em 却没缩进，大概率不是代码写错，而是渲染条件被破坏：
立即学习“前端免费学习笔记（深入）”；
-
<p>被设成display: inline或inline-block——text-indent只对块级盒生效 - 段落处于
display: flex或display: grid容器的直系子元素中 —— flex/grid item 默认不触发块级格式化上下文，强行加display: block可能引发宽度退化问题 - 样式被更高优先级规则覆盖，比如 CMS 富文本输出常带
text-indent: 0 !important，需用更强选择器（如p:not(.rich-text) { text-indent: 2em; }）覆盖
首段不缩进 + 首末段间距控制
中文排版规范要求首段不缩进，且首段顶部、末段底部不应有多余空白。仅写 p { text-indent: 2em; } 是不够的：
- 必须显式重置：
p:first-of-type { text-indent: 0; margin-top: 0; } - 末段底部空白常来自浏览器默认
margin-bottom，建议加：p:last-of-type { margin-bottom: 0; } - 若段落嵌套（如
<p><p>内容</p></p>），内层<p>会继承外层缩进起点，导致双重缩进，应单独重置内层text-indent
Flex/Grid 容器里怎么安全缩进
这不是 bug，是 CSS 格式化上下文的天然限制。别硬套 text-indent，改用布局模拟：
- 给段落加
padding-left: 2em，再配合margin-left: -2em抵消整体偏移（仅当父容器有明确宽度约束时可用） - 更稳妥的是用伪元素：
p::before { content: " "; font-family: "SimSun", "Microsoft YaHei"; }（两个全角空格），但语义弱、复制粘贴会带入空格 - 真正健壮的解法是重构：把段落包进一个普通
<div>再设text-indent，避开 flex/grid 直接子元素限制
真正容易被忽略的点是：缩进效果依赖字体是否加载完成。如果用了自定义中文字体（如 Noto Serif SC），而字体尚未就绪，浏览器会先用备用字体渲染，此时 2em 可能偏大或偏小；等字体加载后才回归预期。线上页面务必实测 FOUT 场景下的首屏缩进表现。
