text-indent: 2em是中文首行缩进最稳写法，但需确保p为block、避开flex/grid父容器、禁用首行内联替换元素，并用媒体查询兜底移动端放大异常，表格中应改用padding-left: 2em。
text-indent: 2em 是中文段落缩进最稳的写法，但光写这行代码远远不够——它在 flex 容器里不生效、在表格里常失效、在移动端放大后可能溢出，真正影响阅读效果的是上下文适配，不是数值本身。
为什么 text-indent: 2em 在某些地方“看起来没缩进”
不是样式写错了，而是浏览器压根没触发首行盒（line box）生成：
-
display不是block：比如父容器用了display: flex，子p默认变成flex-item，text-indent直接被忽略 - 段落开头是
<img alt="如何优化HTML段落缩进的阅读效果" >或<svg></svg>：缩进作用在该元素左侧，文字实际没动，视觉上等于“没缩进” - 被富文本编辑器注入的
text-indent: 0 !important覆盖，尤其 CMS 输出的 HTML 常见 -
white-space: nowrap或pre类样式禁用换行，“首行”语义丢失
最快验证方式：打开开发者工具 → 查看目标 p 的 Computed 面板 → 确认 display 是 block，且 text-indent 最终值非 0。
移动端缩进变大、消失或挤出屏幕怎么办
iOS Safari 和安卓 Chrome 在双指放大或系统字体调大时，会主动重算 em 值，导致 text-indent: 2em 实际渲染成 3em 甚至 4em。这不是 bug，是可访问性机制：
立即学习“前端免费学习笔记（深入）”；
- 坚持用
2em，别退回到32px—— 固定像素在高 DPI 或 zoom=150% 下会严重失配 - 对极端场景加媒体查询兜底：
@media (max-width: 480px) { p { text-indent: 1.6em; } } - 若父容器是
flex或grid，text-indent本就失效，此时必须改用padding-left: 2em（单位仍用em），并确保box-sizing: border-box - 避免在段落开头放内联替换元素；真要插图，用
::before伪元素控制占位
表格单元格（td/th）里怎么让缩进可靠生效
td 默认是 display: table-cell，不生成标准首行盒，text-indent 极易失效，尤其内容短、未换行时：
- 首选方案：
td, th { padding-left: 2em; }—— 不依赖行盒，所有浏览器都认，视觉效果几乎一致 - 若导出 PDF 必须保留首行缩进语义（如印刷规范），才用包裹
div：<td><div style="text-indent: 2em;">内容</div></td> - 调试时临时加
background: #ff0到td上，看文字是否真向右偏移；如果背景框里文字还贴左，说明text-indent没触发，立刻切到padding-left
首段不缩进、引用段反向缩进等例外怎么处理
全局设 p { text-indent: 2em; } 很方便，但排版中总有例外：
- 首段不缩进：
p:first-of-type { text-indent: 0; margin-top: 0; }—— 必须显式声明，否则导语段也缩进 - 引用段落反向缩进：
blockquote p { text-indent: -1em; padding-left: 1em; }（负缩进 + 左内边距防文字溢出） - 标题类段落（如
<p class="title"></p>）：p.title { text-indent: 0; } - 避免用
:not()写复杂选择器，CSS 优先级易失控；宁可显式加类、再单独重置
真正难的不是写出 text-indent: 2em，而是确认它在表格里、Flex 容器里、富文本输出的 HTML 里、打印预览里都按预期工作——每个环境都可能悄悄绕过这个属性。动手前先盯紧 Computed 面板，看 text-indent 是否被计算、是否被覆盖、是否生成了 line box。
