text-indent是唯一可靠、语义正确且浏览器原生支持的首行缩进手段；2em为首选单位，因其基于当前font-size自适应缩放，精准匹配中文“空两字”习惯，兼顾响应式、无障碍与兼容性。
text-indent 是唯一可靠、语义正确、浏览器原生支持的首行缩进手段，其他方式（如 padding-left、margin-left、空格或 ）都会破坏对齐逻辑、干扰无障碍访问，或在响应式场景下失效。
为什么 text-indent: 2em 是首选单位
中文排版要求“空两字”，2em 正好匹配这一习惯，且行为稳定：
-
2em基于当前段落的font-size计算，字号放大时缩进同步变宽，适配系统缩放、无障碍字体设置和响应式断点 -
2ch理论上更贴近字符宽度，但 IE 不支持，且中文字体对ch的实现不一致，易偏差 -
32px或20px在用户开启系统字体放大（如 Windows 125% 缩放）或使用高对比度模式时会明显偏小，阅读体验断裂 -
2rem虽全局统一，但若根字体被 JS 动态修改（如根据屏幕宽度切换html { font-size }），缩进会与段落字号脱节，首行视觉错位
text-indent 失效的三个高频原因及验证方式
写了 text-indent: 2em 却没反应？大概率不是 CSS 写错，而是渲染条件不满足。直接用开发者工具查 Computed Styles：
-
display值不是block：比如p被设为inline、inline-block，或父容器是flex/grid且未触发 BFC - 段落开头含内联替换元素：
<img>、<svg>或display: inline-flex子元素会打断行盒（line box）生成，导致“首行”不可识别 - 高权重样式覆盖：富文本编辑器输出的内联
style="text-indent: 0"会直接压过你的外部规则
验证路径：选中目标 <p> → 开发者工具 → Computed → 查看 display 是否为 block，再点开 text-indent 看最终计算值是否为 2em（而非 0 或 auto）。
立即学习“前端免费学习笔记（深入）”；
首段不缩进怎么安全跳过
导语、标题后第一段通常需视觉起始感，不该缩进。硬写 text-indent: 0 全局覆盖容易漏掉或冲突，稳妥做法是主动排除：
-
p:first-of-type { text-indent: 0; }：适合结构固定、首段总在最前的页面（如博客正文） -
p.no-indent { text-indent: 0 !important; }：更灵活，配合 CMS 或 Markdown 渲染时手动加类；!important仅用于对抗富文本编辑器强制写的内联样式，正常层叠中避免使用 - 慎用
:nth-of-type(1)：如果<p>前有<h2>或<div>，它可能选错元素
Flex/Grid 容器里缩进不生效怎么办
这不是 bug，而是格式化上下文限制：text-indent 依赖块级格式化上下文（BFC），而 Flex/Grid 容器默认不提供。强行加 display: block 可能临时解决，但更推荐分场景处理：
- 若只是视觉需要缩进（非语义强需求）：直接用
padding-left: 2em，它对 flex item / grid item 同样生效，且结果几乎一致 - 若必须保留
text-indent语义（如兼容旧打印样式）：给<p>显式加display: block，并确保其width不是auto（flex item 默认width: auto可能导致退化） - 别在导航菜单、卡片标题等本就不该有“段落缩进”语义的地方硬套
text-indent——那是间距问题，该用margin-left或padding-left
真正容易被忽略的是：text-indent 缩进的是内容盒（content box），不包含 padding 区域。如果你希望文字离边框也有距离，得额外加 padding-left，否则缩进后文字可能紧贴左边界。
