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></svg> 或 display: inline-flex 子元素会打断行盒（line box）生成，导致“首行”不可识别
• 高权重样式覆盖：富文本编辑器输出的内联 style="text-indent: 0" 会直接压过你的外部规则

验证路径：选中目标 <p></p> → 开发者工具 → Computed → 查看 display 是否为 block，再点开 text-indent 看最终计算值是否为 2em（而非 0 或 auto）。

首段不缩进怎么安全跳过

导语、标题后第一段通常需视觉起始感，不该缩进。硬写 text-indent: 0 全局覆盖容易漏掉或冲突，稳妥做法是主动排除：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• p:first-of-type { text-indent: 0; }：适合结构固定、首段总在最前的页面（如博客正文）
• p.no-indent { text-indent: 0 !important; }：更灵活，配合 CMS 或 Markdown 渲染时手动加类；!important 仅用于对抗富文本编辑器强制写的内联样式，正常层叠中避免使用
• 慎用 :nth-of-type(1)：如果 <p></p> 前有 <h2></h2> 或 <div>，它可能选错元素 <h3>Flex/Grid 容器里缩进不生效怎么办</h3> <p>这不是 bug，而是格式化上下文限制：<code>text-indent 依赖块级格式化上下文（BFC），而 Flex/Grid 容器默认不提供。强行加 display: block 可能临时解决，但更推荐分场景处理：
  • 若只是视觉需要缩进（非语义强需求）：直接用 padding-left: 2em，它对 flex item / grid item 同样生效，且结果几乎一致
  • 若必须保留 text-indent 语义（如兼容旧打印样式）：给 <p></p> 显式加 display: block，并确保其 width 不是 auto（flex item 默认 width: auto 可能导致退化）
  • 别在导航菜单、卡片标题等本就不该有“段落缩进”语义的地方硬套 text-indent——那是间距问题，该用 margin-left 或 padding-left

  真正容易被忽略的是：text-indent 缩进的是内容盒（content box），不包含 padding 区域。如果你希望文字离边框也有距离，得额外加 padding-left，否则缩进后文字可能紧贴左边界。