text-indent用rem极易出问题，因rem基准（html font-size）常与段落实际字号不一致，导致缩进“漂移”、比例失衡；失效时需检查display是否为block及computed值是否被覆盖。
text-indent 用 rem 单位不是不能用，而是极易出问题——尤其当项目里有 JS 动态改 html { font-size } 的逻辑时，缩进会跟着“漂移”，视觉上首行忽大忽小，破坏段落节奏。
为什么 text-indent: 2rem 在中文排版里常显得不对劲
根本原因不是单位本身错，而是 rem 的基准（html 元素的 font-size）和段落实际字号经常不一致：
- 段落内用了
font-size: 18px，但根元素是font-size: 10px→2rem = 20px，远大于当前字号下的“两字符宽度” - 夜间模式脚本把
html { font-size }从16px改成20px→ 所有text-indent: 2rem突然变宽到40px，而文字只放大了 25%，首行明显右突 - 用户开启系统字体放大（如 Windows 125% 缩放），浏览器可能重算
rem基准，但段落内联样式未同步响应，导致缩进与文字比例失衡
text-indent 失效时，先查 display 和 text-indent 计算值
写了 text-indent: 2rem 没反应？别急着换单位，打开开发者工具看两个关键点：
- 目标
<p></p>的Computed → display必须是block；若为inline、inline-block或被flex/grid父容器压制，text-indent直接无效 - 同页检查
Computed → text-indent最终值：如果是0px或auto，说明被更高权重样式覆盖（比如富文本编辑器注入的style="text-indent: 0"） - 段落开头是
<img>或<svg></svg>？这些内联替换元素会打断行盒生成，text-indent作用不到“首行文本”，只压在图标左侧——看起来像没缩进
真要用 rem，必须控制根字号稳定或加兜底
如果项目强制要求全局统一缩进尺度（例如 PDF 导出、设计系统规范），且能确保 html { font-size } 不被运行时修改，可谨慎使用 rem，但需配合以下任一做法：
- 显式锁定根字号：
html { font-size: 16px !important; }，再设p { text-indent: 2rem; }（2rem = 32px） - 用
em替代并包裹一层兼容逻辑：p { text-indent: 2em; }，再通过 JS 监听html字号变化，动态同步重设所有段落的font-size（成本高，仅限强一致性场景） - 放弃
text-indent，改用padding-left+text-indent: -9999px模拟（需加overflow: hidden防溢出，仅适用于图标+文字固定结构）
真正难处理的不是单位换算，而是缩进语义和渲染上下文的耦合——text-indent 本质依赖块级盒与行盒的生成时机，任何布局干扰（flex/grid/inline 替换元素/white-space）都会让它静默失效。单位只是表象，条件才是关键。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
