text-indent: 2em 不等于两个中文字符宽度，而是当前元素 font-size 的两倍；中文字宽受字体、渲染引擎等影响，实际约1.7–2.3个字符宽，em 是响应式首选但非精确字符数单位。
text-indent 用 em 单位缩进两个字符，真的等于“两个中文字符宽度”吗？
不是。text-indent: 2em 缩进的是当前元素 font-size 的 2 倍，不保证恰好是两个中文字符宽度——因为中文字体的字宽受字体、渲染引擎、是否启用等宽模式影响，em 是相对 font-size 的度量，不是字符数。
常见错误现象：text-indent: 2em 在某些字体（如 "Microsoft YaHei"）下看起来缩进偏大，在 "SimSun" 下又略小；移动端 Safari 有时对 em 的解析与桌面端略有差异。
- 若父元素
font-size: 16px，则2em=32px，而一个标准中文字符（如“字”）在多数浏览器中实际渲染宽度约 14–18px，所以 2em ≈ 1.7–2.3 个字符宽，非严格等于 2 - 想更贴近“两个汉字”，可试
text-indent: 2ch（但 IE 不支持，iOS Safari 12+ 才稳定） - 兼容性优先场景，直接用
text-indent: 32px反而更可控（前提是字号固定）
为什么不用 rem 或 px 直接写死缩进值？
rem 依赖根字号，缩进会随 :root 的 font-size 变化，但首行缩进通常应与段落自身字号关联，而非全局字号；px 在缩放或响应式字号变化时无法自适应。
使用场景：当段落本身字号动态变化（如通过媒体查询切换 font-size），em 是唯一能保持缩进比例一致的单位。
-
em是相对于当前元素的font-size，不是父元素，这点常被误解 - 若段落设置了
font-size: 1.2rem，且根字号为16px，那text-indent: 2em实际是2 × 19.2px = 38.4px - 避免在
font-size用百分比或em嵌套定义的元素里用text-indent: em，易引发计算链混乱
中文排版中真正可靠的“两字符缩进”方案
纯 CSS 没有“字符数缩进”的原生单位（ch 算半个，但它基于 “0” 字符宽度，对中文字体不准确），所以需要组合策略。
实操建议：
- 优先用
text-indent: 2em，并搭配统一中文字体（如font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif），减少字宽波动 - 对精确要求高的印刷级输出，用伪元素 +
display: inline-block; width: 2em模拟缩进（兼容所有浏览器） - 避免在
line-height极小或font-size小于12px的文本上硬套2em，此时缩进视觉上会显得过大
blockquote p {
font-size: 14px;
text-indent: 2em; /* 实际 28px，足够覆盖多数中文字宽 */
}
容易被忽略的继承与重置问题
text-indent 不继承，但如果你在父容器设了 text-indent，子段落不会自动获得——必须显式设置。更麻烦的是，某些 UI 框架（如 Ant Design、Element Plus）的 p 标签默认重置了 text-indent 为 0。
- 检查 computed styles，确认最终生效的是你写的规则，而不是框架 reset
- 用
!important是临时解法，更好的方式是提高选择器权重，例如.article-content p而非单纯p - Flex 或 Grid 容器中的文本块，若设了
display: flex，text-indent会失效（需确保文本在块级上下文中）
实际项目里，“两个字符缩进”本质是个视觉约定，不是像素级数学题。重点不是单位选得多巧妙，而是让缩进在目标设备和字体组合下稳定、可读、不突兀。em 是平衡兼容性与响应性的合理起点，但别迷信它等于“两个字”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
