text-indent: 2em是唯一可靠、语义正确且浏览器原生支持的首行缩进方案，因其基于font-size等比缩放，精准匹配中文“空两字”习惯，兼顾响应式、无障碍与兼容性。
text-indent 是唯一能真正保持段落缩进整齐的方案，其他方式看着像，实则在响应式、高 DPI、屏幕阅读器或富文本场景下会陆续崩坏。
为什么 text-indent: 2em 是默认起点而不是“可选”
它不是经验数值，而是中文排版的语义基准：1em ≈ 当前字号，2em 就是两个汉字宽度。放大字体、系统缩放、换用 24px 标题时，缩进自动等比变宽，视觉节奏始终一致。2px、20px 或 2% 都会失准——前者在 200% 缩放下只剩一半效果，后者在窄屏（如 320px 宽）里可能缩进不到一个字。
常见错误现象：
- 写了
text-indent: 2em却没效果 → 检查 computed 中display是否为block，不是flex或grid项 - 首行缩了，但第二行顶到左边界 → 确认没混用
white-space: nowrap或开头有<img> - 复制粘贴后缩进消失 → 说明用了空格或
padding-left模拟，语义上不被保留
text-indent 在表格、Flex、Grid 里失效怎么办
不是属性写错了，是这些布局模式改变了 <p> 的盒模型行为：display: table-cell 不生成标准首行盒，display: flex/grid 让 <p> 变成网格项，失去“首行”语义。
立即学习“前端免费学习笔记（深入）”；
对应解法：
- 表格单元格（
<td>）→ 改用padding-left: 2em；若需语义正确（如导出 PDF），包一层<div style="text-indent: 2em;"> - Flex 容器中文字被居中抵消缩进 → 不要依赖
justify-content: center，改用p { text-align: center; text-indent: 2em; } - Grid 容器中缩进错位 → 给
<p>显式加display: block，或外层套<div>保块级上下文
首段不缩进、末段去边距这些细节怎么稳住
浏览器默认给 p 设了 margin: 1em 0，但“首段不缩进”不是靠“没写就等于没有”，必须显式重置，否则在不同浏览器或富文本注入后极易跑偏。
推荐组合写法：
- 首段清除：
.article p:first-of-type { text-indent: 0; margin-top: 0; } - 末段收尾：
.article p:last-of-type { margin-bottom: 0; } - 避免用
:not(:first-of-type)这类复杂选择器 —— 优先级易被覆盖，调试困难 - 若段落嵌在
<blockquote>或<aside>里，需单独加作用域，比如blockquote p { text-indent: -1em; padding-left: 1em; }
调试时最该盯住的三个地方
别靠肉眼猜，直接开开发者工具看 computed 值：
-
text-indent最终值是否为2em（不是0，也不是被!important覆盖成其他值） -
display是否为block（不是inline-block、flex、grid或table-cell） - 段落开头是否有不可见字符、
<svg>、emoji 或内联替换元素 —— 它们会吃掉缩进位置，让文字从“第二格”开始排
真正难的不是写出那行 text-indent: 2em，而是确认它在富文本插入、打印预览、无障碍读屏、CSS-in-JS 动态注入这些边缘场景里，依然按你预期工作。一旦父容器变了 display，或者某处加了个 !important，缩进就可能当场失效，这点最容易被忽略。
