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）** 的元素起作用，常见失效场景：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 给 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 就静默失效，连报错都没有。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！