text-indent: 2em 是中文首行缩进的首选，因其基于 font-size 自适应，兼顾响应式与可访问性；其他单位易失准，常见失效原因包括布局干扰、rtl 方向及 pre 格式化。
text-indent 是唯一可靠的方式，其他方法（比如 margin-left 或 padding-left）看起来像缩进，实际是整段左移，会破坏对齐、响应式和可访问性。
为什么 text-indent: 2em 是首选值
中文排版要求“首行空两格”，2em 能稳定对应这个视觉预期：它基于当前 p 的 font-size，字号放大时缩进同步变宽，小屏 zoom 或系统字体调整后仍可用。用 32px 或 20px 在高 DPI 屏或 150% 缩放下会明显偏窄；% 值则依赖容器宽度，窄屏下可能缩进不足 1 字符；rem 虽可行，但若项目中动态修改了根字体大小（如夜间模式），缩进会意外跳变。
常见错误现象：p { text-indent: 20px; font-size: 12px; } → 缩进比字还宽，文字挤到第二行；p { text-indent: 5%; } → 在 320px 宽度下仅 16px，远不够两汉字。
- 优先写
text-indent: 2em，不是“习惯”，而是单位行为与中文阅读逻辑匹配 - 避免在
p上直接写内联样式style="text-indent: 2em"，重复难维护，且无法响应式调整 - 若设计稿强约束像素值，至少同步控制
font-size，例如p { font-size: 16px; text-indent: 32px; }
text-indent 不生效的三个高频原因
写了 text-indent: 2em 却没反应？大概率不是代码错，而是布局干扰：
-
p内第一个子元素是display: inline-block、float或带vertical-align的元素 —— 它们会打断首行盒（line box）生成，导致“第一行”不存在 - 父容器设了
direction: rtl——text-indent会向右缩进，视觉上像消失了，其实它在工作 -
p被包在white-space: pre或pre标签里 —— 预格式化行为优先级更高，text-indent被忽略
调试建议：打开开发者工具，检查 computed styles 中 text-indent 是否被计算为有效值；再逐层往上查父元素的 white-space、direction 和子元素的 display 类型。
第一段不缩进怎么处理
导语、标题后紧跟的段落通常不该缩进。硬写 text-indent: 0 覆盖全局规则容易漏掉或冲突，更稳的做法是主动排除：
- 结构固定时用
p:first-of-type { text-indent: 0; margin-top: 0; }—— 注意：如果p前有h2或div，:first-of-type仍能准确选中首个p - 需要灵活性时加类：
<p class="no-indent">导语内容</p>，再配 CSSp.no-indent { text-indent: 0 !important; }——!important仅用于覆盖富文本编辑器输出的内联style，正常层叠中尽量不用 - 慎用
:nth-of-type(1)，它不按 DOM 顺序，而按同类型元素计数，容易选错
Flex/Grid 容器里 text-indent 失效怎么办
当 p 是 display: flex 或 display: grid 的直接子元素时，text-indent 常常失效——因为 flex/grid 触发了新的格式化上下文，块级盒行为被覆盖。
- 首选方案：改用
padding-left: 2em模拟缩进，更可控，也符合“视觉缩进本质是间距”的语义 - 若必须保留
text-indent，给p显式加display: block，并确认没被align-self等属性干扰 - 别在导航菜单、卡片标题等地方强行用
text-indent做“左空”，那该用margin-left或padding-left控制元素间距
真正容易被忽略的是：缩进是否在打印样式表（@media print）里也生效；某些 PDF 导出工具会忽略 text-indent，需实测验证。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
