2em最稳妥，因1em≈当前字号下一个汉字宽度，缩进随字体缩放；20px为固定值，高DPI或字体放大时失准；2%按父宽计算，与文字无关易错位。
直接用 text-indent，设成 2em 最稳妥，别用空格、别用 px、也别往 span 上硬套。
为什么是 2em 而不是 20px 或 2%
中文排版约定“首行缩进两字”，这个“字”指当前字号下的一个汉字宽度。em 正好匹配这一语义：1em ≈ 当前 font-size 下一个汉字的水平尺寸，2em 就稳稳缩进两个字。而：
-
20px是死值——用户放大字体或换高 DPI 屏幕时，缩进量不变，可能变成“缩进半个字”或“缩进一整行”，破坏阅读节奏 -
2%看似灵活，实则按父容器宽度算（比如父宽 1000px，2%= 20px），和文字本身毫无关系，容器一变宽，缩进就乱跳 - 用
rem也可行，但需确保根字号稳定；若项目中html的font-size动态变化（如响应式 rem 方案），em反而更可控
text-indent 不生效？先查这三件事
它只对生成**块级格式化上下文（BFC）且含行框（line box）** 的元素起作用，常见失效场景：
- 给
span、a这类默认display: inline的元素加text-indent—— 直接忽略，得先加display: block或改用margin-left模拟（但语义不对） - 段落在
display: flex容器里没显式设display: block—— flex item 默认是 inline-level，不触发块格式化，p标签也会失效 - 父级或自身设置了
font-size: 0（常见于清除 inline 元素间隙的 hack）——em缩进会变成 0，得在子元素里重置font-size
负缩进和多列布局怎么处理
负值 text-indent 能做悬挂缩进或文本隐藏，但容易让文字跑出视口左边界：
立即学习“前端免费学习笔记（深入）”；
- 用
text-indent: -2em后，务必补上padding-left: 2em，否则首行文字可能被裁切或溢出 - 多列布局（
column-count）下，text-indent必须写在每一段落上（如.article p { text-indent: 2em; }），不能只写在容器上——容器的“第一行”只算整个内容流的开头，不负责每列的段首 - 如果段落里含
img且位于首行，它会随文字一起缩进；但若图片是float或position: absolute，则脱离文档流，缩进对其无效
真正容易被忽略的是继承链里的 font-size 中断，以及 flex 容器中对 display 的隐式重置——这两个点一错，text-indent 就静默失效，连报错都没有。
