用 text-indent: 2em 是最佳实践，因其随字体大小自动缩放；固定像素值在缩放、高dpi、系统字体放大时失准；ch/rem有兼容性或稳定性问题；缩进失效多因display非block或flex/grid干扰。
用 text-indent: 2em 就行，它会自动随字体大小缩放，不需要手动计算或切换单位。
为什么必须用 em，不能直接写像素值
固定像素（比如 32px）在以下场景会出问题：
- 用户把浏览器 zoom 调到 150%，
32px缩进还是 32px，但文字变大了，视觉上只剩“一格半” - 高 DPI 屏幕（如 MacBook Retina）下，
32px实际渲染可能模糊或偏小 - 系统级字体放大（Windows 设置 / macOS 辅助功能）时，像素值完全不响应
-
2em则始终是当前font-size的两倍：16px 字号 → 32px，20px 字号 → 40px，自然对齐
什么时候可以考虑 ch 或 rem
2ch 和 2rem 看似合理，但各有硬伤：
-
2ch：按字符 “0” 宽度算，多数中文字体里 1ch 远小于一个汉字，导致缩进不足；IE 完全不支持 -
2rem：依赖根元素html { font-size }，如果项目用 JS 动态改它（比如夜间模式切换），缩进会意外跳变 - 只有极少数场景适合微调：
1.8em或2.2em可能更贴合某些字体的字宽渲染，但 2em 是默认起点，够用就别动
缩进失效的常见原因和验证方法
写了 text-indent: 2em 却没效果？不是代码错了，而是渲染条件不满足：
-
p被设成display: inline或inline-block——text-indent只对块级元素生效 - 父容器用了
display: flex或display: grid——p的块格式化上下文被覆盖 - 段落开头是
<img>或<svg></svg>—— 缩进发生在该内联替换元素左侧，视觉上等于没动 - 富文本编辑器输出带了
!important覆盖，比如p { text-indent: 0 !important } - 最快验证方式：打开开发者工具 → 查看目标
p的 Computed 标签页 → 确认display是block，且text-indent最终值不是0
首段不缩进、末段去底边距怎么配合字体缩放
首段导语、末段收尾常需特殊处理，但必须用相对单位保持一致性：
- 首段清缩进+顶边距：
.article p:first-child { text-indent: 0; margin-top: 0; } - 末段只清底边距：
.article p:last-child { margin-bottom: 0; } - 别用
p:first-of-type，容易被其他p（如侧边栏、页脚）误匹配；加个容器类更稳 - 这些规则里的
0是绝对值，没问题；但所有涉及距离的值（如margin）也建议用em，比如margin: 0.8em 0，才能和text-indent同步缩放
真正麻烦的是混合场景：富文本编辑器导出的 HTML 常同时含内联 style、 和 text-indent，这时候缩进逻辑互相打架。上线前得用开发者工具逐层点开 computed styles，看最终生效的是哪一条。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
