text-indent: 2em 是唯一语义正确且可靠的首行缩进写法，它仅缩进首行、兼容两端对齐与响应式，但需确保元素为块级、未被flex/grid/inline化、无强制重置或white-space干扰。
text-indent: 2em 是唯一语义正确且可靠的首行缩进写法
直接写 text-indent: 2em 就能实现接近中文“空两格”的效果，前提是元素是块级、没被布局干扰、单位选对。它只推首行，不影响第二行位置，也不破坏 text-align: justify 或响应式对齐。
常见错误现象：加了样式却没缩进，不是代码写错，而是渲染条件不满足：
-
<p></p>被设成display: inline或inline-block—— 浏览器压根不生成“首行盒” - 父容器用了
display: flex或display: grid，且没触发 BFC，子<p></p>的块级行为被覆盖 - 段落开头是
<img alt="HTML怎么在页面里控制段落缩进" >或<svg></svg>等内联替换元素，缩进发生在该元素左侧，视觉上等于没动 - 某处写了
p { text-indent: 0 !important }（富文本编辑器输出高频出现） -
white-space: nowrap或white-space: pre破坏了换行，“首行”概念失效
调试时打开开发者工具 → Computed 面板 → 看目标 <p></p> 的 display 是否为 block，且 text-indent 最终计算值是否非零。
为什么不能用 padding-left 或 margin-left 模拟缩进
它们会让整段文字左移，不是“首行缩进”，而是“整段偏移”。后果很具体：
立即学习“前端免费学习笔记（深入）”；
-
padding-left: 2em：第二行也缩进，破坏两端对齐；小屏下可能溢出容器；和父容器border或padding叠加造成意外交互 -
margin-left: 2em：整个<p></p>框被挤向右，可能顶到导航栏、撑破 flex 容器，甚至让内嵌图标错位 - 两者都绕过排版语义，无法导出 PDF 时匹配印刷规范（比如参考文献悬挂缩进）
例外场景：<td> 里 <code>text-indent 极易失效（因默认 display: table-cell），此时才推荐 td, th { padding-left: 2em } —— 不依赖行盒，兼容性稳。
单位选错，缩进就“看起来不对”
2em 是唯一兼顾可读性、响应式和无障碍的单位：
-
2em：1em ≈ 当前字号，系统放大字体或开启无障碍缩放时，缩进同步变宽，始终视觉接近两汉字宽 -
32px：固定像素，系统缩放到 150% 时字变大但缩进不变，只剩半格 -
2rem：若项目用 JS 动态改html { font-size }（如夜间模式），缩进会意外跳变 -
2%：按父容器宽度算，窄屏下可能缩进不到 5px，完全看不出效果 -
2ch：语义更准（1ch ≈ 字符 “0” 宽度），但 IE 不支持，中文字体下 1ch 远小于一个汉字
负值（如 text-indent: -1em）可用于悬挂缩进，但必须配合 padding-left: 1em 防止文字重叠或溢出。
首段、表格、富文本里的缩进要单独处理
全局写 p { text-indent: 2em } 很方便，但实际排版中必须排除这些情况：
- 首段不缩进：
p:first-of-type { text-indent: 0; margin-top: 0; }—— 中文排版基本规则，且避免和浏览器默认margin-top叠加造成顶部压迫 <td> 内容短、未换行时，<code>text-indent常不触发；稳妥做法是td, th { padding-left: 2em }，或包裹<div style="text-indent: 2em"> 保语义 <li>CMS 富文本输出常带内联 <code>style="text-indent: 0"，需用更高权重覆盖，例如p[style] { text-indent: 2em !important; }
真正难的不是写出那行 text-indent: 2em，而是确认它在所有上下文里都被计算、未被覆盖、且成功生成了 line box —— 表格里、Flex 容器里、打印预览里，每个环境都可能悄悄绕过这个属性。
