text-indent是唯一规范、语义正确且兼容的首行缩进方案；它基于font-size自适应缩放，确保2em精准匹配中文“空两字”习惯，避免空格、margin-left等导致的可访问性、响应式及维护性问题。
text-indent 是唯一规范、语义正确且浏览器兼容的段落首行缩进方案。其他方式（如 、margin-left、嵌套 <div>）都属于 hack，会破坏可访问性、响应式行为或维护性。
为什么必须用 text-indent 而不是空格或
用多个 或全角空格塞在 <p> 开头，看似“能缩进”，但实际带来三类硬伤：
- 屏幕阅读器会逐字读出这些空白，影响无障碍体验
- 复制粘贴时带入无意义字符，污染内容数据
- 字号缩放（如用户放大字体、媒体查询切换
font-size）后，缩进量完全不变，视觉上要么过小、要么突兀
而 text-indent: 2em 是基于当前字体大小的相对计算，天然适配缩放与响应式变化。
text-indent: 2em 的实际效果与常见偏差
“2em”在绝大多数中文字体（微软雅黑、思源黑体、苹方）下视觉接近两个汉字宽度，但要注意它不是绝对像素值——它等于当前 font-size 的两倍。例如：
立即学习“前端免费学习笔记（深入）”；
- 若
p { font-size: 16px; }，则text-indent: 2em= 32px - 若某段落设了
font-size: 14px，缩进自动变为 28px，仍保持比例协调 - 用
2rem则依赖html根元素字号，容易在多层嵌套字体设置下失准
不推荐用 px（如 40px）或 ch（浏览器对中文 ch 支持不稳定），更别写成 text-indent: 2ch —— 实测多数中文字体下 1 个汉字 ≠ 1ch。
缩进失效时优先排查这几点
写了 text-indent 却没反应？不是代码错，大概率是布局或继承干扰：
-
<p>被设为display: inline或float: left——text-indent只对块级元素生效 - 父容器有
overflow: hidden且缩进超出左边界，内容被裁掉（临时加padding-left: 1em可验证） - CSS 优先级被覆盖，比如全局重置规则写了
p { text-indent: 0 !important; } - 用了
direction: rtl或writing-mode: vertical-rl，缩进方向自动翻转，需配合text-align调整视觉锚点
移动端尤其注意：iOS Safari 在 flex 容器内渲染 text-indent 偶有延迟，加 transform: translateZ(0) 可强制触发重绘。
团队协作中缩进风格怎么统一
缩进不是“写完就跑”的样式，它涉及长期可维护性：
- 禁止在 HTML 中写内联样式如
<p style="text-indent: 2em">—— 无法批量调整，主题切换时全崩 - 推荐定义语义化 class：
<p class="article-paragraph">，再统一控制.article-paragraph { text-indent: 2em; margin-bottom: 1em; } - 若项目用 Sass/Less，把缩进值抽成变量（如
$paragraph-indent: 2em），一处改，全局生效 - 编辑器务必设为“插入空格，4 个/缩进层级”，避免混入 Tab —— 缩进混乱常从这里开始
真正容易被忽略的是富文本场景：CMS 或编辑器导出的 HTML 常自带 style="text-indent: 24px"，和你的 CSS 规则冲突。上线前必须用开发者工具检查 computed styles，确认最终生效的是你定义的 2em，而不是某个被遗忘的内联像素值。
