text-indent: 2em 是唯一语义正确、浏览器原生支持的首行缩进方式，因 em 随 font-size 缩放确保视觉一致性，而 px/%/ch/rem 等存在兼容性或响应式缺陷；其失效主因是 display 非 block、父容器为 flex/grid、首行为替换元素或 white-space 禁用换行。
直接用 text-indent，设成 2em，别碰 padding-left 或空格——这是唯一语义正确、浏览器原生支持的首行缩进方式。
为什么 text-indent: 2em 是首选单位
em 单位随当前 font-size 缩放，用户放大字体或开启系统级缩放时，缩进同步变宽，视觉上始终接近“两字符”，不会在大字号下显得过窄。而 32px 在 200% 缩放时还是固定 32px，缩进就只剩半格；2% 则依赖容器宽度，窄屏下可能缩进不到 5px，完全失效。
常见错误：
- 用 2ch：语义更准（1ch ≈ 字符 “0” 宽度），但 IE 不支持，且多数中文字体里 1ch 明显小于一个汉字
- 用 2rem：若项目通过 JS 动态改 html { font-size }（如夜间模式），缩进会意外跳变
- 用负值配 !important 覆盖富文本编辑器输出：容易和 direction: rtl 冲突，缩进方向反向
text-indent 不生效的四个真实原因
不是代码写错，而是渲染条件被破坏：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
display不是block：比如p被设为inline或inline-block，浏览器压根不识别“首行”概念 - 父容器是
flex或grid：子元素脱离常规文档流，text-indent失效（此时该用padding-left: 2em替代） - 段落开头是
<img>或<svg></svg>：缩进发生在该内联替换元素左侧，视觉上等于没动 -
white-space: nowrap或pre：换行被禁用，“首行”失去意义，text-indent无处作用
最快验证方式：打开开发者工具 → 查看目标 <p></p> 的 Computed 标签页 → 确认 display 是 block，且 text-indent 最终值不是 0。
text-indent 和 padding-left 别混用
它们解决的是完全不同的问题：
-
text-indent: 2em：只推第一行，第二行及后续行左对齐边界，符合中文段落规范 -
padding-left: 2em：整段右移，所有行都缩进，text-align: justify会失效，小屏下还可能溢出容器 - 若误用
padding-left模拟缩进，响应式断点切换时缩进值不会随字号变化，阅读体验断裂
例外场景：表格单元格（<td>）里用 <code>text-indent 有效，但需确保它仍是块级上下文（默认 display: table-cell 已满足）；而 <span></span> 这类行内元素必须先加 display: block 才能生效。
真正难的不是写那行 text-indent: 2em，而是确认它运行在正确的格式化上下文中——尤其当页面用了 Flex/Grid 布局、嵌套了富文本内容、或启用了 RTL 文本时，缩进会悄无声息地消失，连报错都没有。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
