text-indent: 2em是唯一可靠、语义正确且浏览器原生支持的首行缩进手段；推荐用于p标签，2em适配中文“空两字”习惯，自适应字体缩放，兼顾响应式与无障碍，避免使用padding-left、margin-left或 等错误方式。
直接用 style 内联写 text-indent
最快速、最确定生效的方式就是给目标 <p> 加内联样式：<p style="text-indent: 2em;">这段文字首行缩进</p>。它不依赖外部 CSS 文件或类名，也不受选择器权重干扰，适合临时调整、邮件模板、CMS 富文本输出后补救等场景。
注意：如果该段落已带其他内联样式（比如 style="color:red;"），别覆盖，要合并写成 style="color:red; text-indent: 2em;"；否则 text-indent 会被丢弃。
用 class 控制单一段落缩进更可持续
当页面里有多个“需要缩进”和“不需要缩进”的段落混排时，硬写内联样式很快会失控。此时应定义明确语义的 class：
-
.indent-first：只给第一段加缩进（配合p:first-of-type更稳妥） -
.no-indent：显式取消缩进，用于标题后导语、列表项内说明等 -
.quote-indent：专用于引文段落，可配不同值如text-indent: 1.5em
示例：<p class="no-indent">这是标题下的首段，不缩进</p><p class="indent-first">这是正文第一段，缩进</p>。CSS 中只需写 .no-indent { text-indent: 0; } 和 .indent-first { text-indent: 2em; } 即可。
立即学习“前端免费学习笔记（深入）”；
富文本编辑器输出的段落缩进经常失效？检查三处
从 TinyMCE、Quill 或 Notion 导出的 HTML 常见缩进丢失，不是 text-indent 没写，而是被覆盖或压制：
- 编辑器自带的内联
style="text-indent: 0px !important;"—— 需用更高权重覆盖，比如p[style] { text-indent: 2em !important; } - 段落开头是
<img>或<svg>—— 缩进作用在图像左侧，视觉上等于没动；解决办法是把图像包进<span>并设display: inline-block，或改用padding-left整体偏移 - 父容器用了
display: flex或display: grid，且未触发 BFC —— 此时text-indent失效，直接换padding-left: 2em更可靠
别用 连写模拟缩进
有人在段落开头手动加两个 来“凑缩进”，这在纯静态 HTML 里看似能用，但实际埋了三个坑：
- 复制粘贴时容易被编辑器转成普通空格，缩进消失
- 屏幕阅读器会把
- 响应式下字体放大时，
真正需要控制首行位置，就老实用 text-indent；需要整段左移（比如树形结构），用 padding-left；两者职责不能混。
