text-indent: 2em是唯一能自然联动字体大小的段落缩进写法，因其缩进值恒等于当前font-size的两倍，实时适配系统缩放、媒体查询或内联样式引起的字号变化；失效主因是display非block、父容器为flex/grid、首行为替换元素或white-space禁用换行。
text-indent: 2em 是唯一能自然联动字体大小的段落缩进写法——它不是“配合”，而是“绑定”：缩进值 = 当前 font-size × 2，无需 JS 计算、媒体查询或手动维护。
为什么 em 单位能自动适配字体变化
浏览器对 em 的解析是实时的、继承的、无条件的：text-indent: 2em 在任何时刻都等于该元素当前生效的 font-size 值的两倍。这意味着：
- 用户开启系统级字体放大（如 Windows 缩放 125% 或 macOS 辅助功能），
font-size变大 → 缩进同步变宽 - 页面用媒体查询动态改了
p { font-size: 14px; }→text-indent自动变成 28px - 富文本中某段设了
style="font-size: 18px"→ 该段缩进立刻为 36px，无需额外 class - 即使嵌套在
rem驱动的根字号体系里（html { font-size: 16px; }），em仍基于其直接父元素的font-size，更贴近排版直觉
常见失效场景：字体变了，缩进却没动
不是 em 失效，而是缩进根本没被渲染出来。典型原因包括：
-
p被设为display: inline或inline-block——text-indent对非块级元素无效 - 父容器用了
display: flex或display: grid，且未触发 BFC，导致子p的块级盒行为被抑制 - 段落开头是
<img>或<svg></svg>，缩进发生在该内联替换元素左侧，视觉上“看不见” - 某处写了
p { text-indent: 0 !important; }（富文本编辑器输出高频出现） -
white-space: nowrap禁用了换行，“首行”概念消失
调试时直接看开发者工具的 Computed 面板：text-indent 最终值是否非零？display 是否为 block？
text-indent 和其他单位对比的实际表现
同一段文字，不同单位在字号变化时的行为差异极大：
-
text-indent: 2em：16px 字体 → 32px；20px 字体 → 40px；系统缩放 150% → 缩进同步放大 1.5 倍 -
text-indent: 32px：无论字体是 12px 还是 24px，缩进永远是 32px，小字号下显宽，大字号下显窄 -
text-indent: 2rem：若项目用 JS 切换夜间模式并改了html { font-size: 12px; }，缩进会从 32px 突变为 24px，破坏段首对齐节奏 -
text-indent: 2ch：语义最准（1ch ≈ “0” 宽），但 IE 完全不支持，且多数中文字体中 1ch 远小于一个汉字，实际需写4ch才接近两字宽
真正难的不是选哪个单位，而是确认 text-indent 在目标元素上是否被浏览器当作“有效声明”来计算——它可能被覆盖、被忽略、被布局模式屏蔽。只要 display 不是 block，或者父容器格式化上下文变了，联动就断了。这点比单位选择本身更关键。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
