text-indent: 2em是唯一语义正确且仅缩进首行的方式；失效主因是元素非块级、父容器为flex/grid、首行含内联替换元素、高权重样式覆盖或white-space禁用换行，须通过开发者工具Computed面板验证display是否为block且text-indent计算值非零。
text-indent 是唯一语义正确、只动首行且不破坏对齐的缩进方式。其他方案（比如 padding-left）本质是平移整段，会挤坏两端对齐、响应式布局和富文本内嵌元素。
为什么直接写 text-indent: 2em 没效果
不是代码错了，而是渲染前提没满足：
-
p被设成display: inline或inline-block—— 浏览器压根不识别“首行”概念 - 父容器用了
display: flex或display: grid，且没触发块级格式化上下文（BFC） - 段落开头是
<img alt="HTML怎么给文章段落做缩进" >、<svg></svg>等内联替换元素，缩进发生在它左边，视觉上等于没动 - 某处写了
p { text-indent: 0 !important }（CMS 富文本输出里极常见） - 用了
white-space: nowrap或white-space: pre，导致换行失效，“首行”失去意义
最快验证法：打开开发者工具 → Computed 面板 → 看目标 p 的 display 是否为 block，且 text-indent 最终计算值是否非零。
text-indent 该用什么单位才靠谱
单位选错，缩进在不同设备或字体设置下就“看起来不对”：
立即学习“前端免费学习笔记（深入）”；
-
2em：最稳。1em ≈ 当前字号，缩进随字体放大/缩小，中文下始终接近两字符宽度 -
2ch：语义更准，但 IE 完全不支持；多数中文字体里 1ch 远小于一个汉字，实际缩进不足 -
32px或20px：仅限字体绝对固定的静态页；系统缩放、高 DPI 屏幕下会失准 -
2%：按父容器宽度算，和字体无关——窄屏下缩进可能只剩几像素 -
2rem：若项目用 JS 动态改html { font-size }（如夜间模式），缩进会意外跳变
别用负值或百分比兼容 IE8；text-indent: -1em 和 text-indent: 5% 在 IE8 下支持极差，尤其配合 direction: rtl 时容易错位。
表格里、Flex 容器里、富文本中怎么缩进
这些场景下 text-indent 失效是常态，不是 bug：
<td> 默认是 <code>display: table-cell，不生成标准“首行盒”，内容短或未换行时极易失效 → 改用td, th { padding-left: 2em; }- Flex 容器子项默认不参与块级布局 → 强行加
display: block可能引发退化行为（如width: auto下缩进消失）→ 首选padding-left: 2em - 富文本编辑器（如 TinyMCE、Quill）常输出带
!important的重置样式 → 用更高权重覆盖，例如.article-content p { text-indent: 2em !important; } - SSR 或静态生成时，内联样式可能覆盖外部 CSS → 把关键缩进逻辑提到
<style></style>标签内，或用!important锁定
真正难的不是写对那行 text-indent: 2em，而是确认它在所有上下文里都按预期工作：表格里、Flex 容器里、富文本输出的 HTML 里、打印预览里……每个环境都可能悄悄绕过这个属性。动手前先盯紧 Computed 面板，比反复试数值管用得多。
