text-indent 是唯一靠谱的首行缩进方案，因其语义正确、响应式友好且可维护；其他方式如空格、margin-left、padding-left 或 ch 单位均存在兼容性、可访问性或布局破坏问题。
text-indent 是唯一靠谱的首行缩进方案
在文章详情页里实现中文段落首行缩进，text-indent 是唯一符合语义、可维护且响应式友好的方式。用空格、 或 <pre class="brush:php;toolbar:false;"></pre> 都是临时补丁，上线后容易出错。
常见错误现象：复制粘贴后缩进消失、移动端字体变小导致缩进不足、屏幕阅读器跳过缩进字符、富文本编辑器导出的 HTML 里内联 style="text-indent: 2em" 和全局 CSS 冲突。
-
text-indent: 2em表示缩进当前字体大小的两倍，比24px更健壮；小屏下字体缩到 14px，缩进自动变为 28px，仍可读 - 别设
text-indent: 2ch—— 中文字体下ch单位不可靠，Chrome 和 Safari 渲染不一致 - 如果段落用了
display: inline、float或flex子项，text-indent会完全失效 - 富文本内容（如 CMS 后台编辑器输出）若已带内联样式，需在 CSS 中用
!important覆盖，或用更具体的选择器如.article-content p
为什么不能用 margin-left 或 padding-left 模拟首行缩进
有人发现给 p 加 margin-left: 2em 看起来也“缩进”了，但这是整段左移，不是首行缩进。它破坏的是排版逻辑，不是视觉效果。
典型问题场景：详情页含引用块、代码块、图片浮动等混合布局时，margin-left 会让整个段落脱离栅格系统，和相邻的 <blockquote></blockquote> 或 <figure></figure> 对不齐；用户选中文本时，高亮区域会从缩进位置开始，而非视觉首字起始点。
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
margin-left影响整块元素位置，会干扰 CSS Grid / Flex 布局的对齐基准线 -
padding-left更危险：它扩大了元素盒模型尺寸，可能触发横向滚动条，尤其在窄屏下 - 两者都无法实现悬挂缩进（比如参考文献格式），而
text-indent: -1.5em; padding-left: 1.5em可以
富文本详情页中 text-indent 的兼容性陷阱
CMS 或 Markdown 渲染器输出的 HTML 常混用多种缩进手段：<p style="text-indent: 2em"></p>、<blockquote></blockquote> 套嵌、甚至手动插入多个 。这时候浏览器 computed styles 里看到的缩进值，可能是多层叠加的结果。
最容易被忽略的一点：如果父容器（如 .article-content）设置了 font-size: 0.875rem，而子 p 又没重置字体大小，那 text-indent: 2em 实际缩进量就是 0.875rem × 2，远小于预期。
- 务必检查 computed styles 中的
text-indent是否为最终生效值，而不是声明值 - 避免在富文本容器上设
font-size，改用rem基准统一控制，或直接在p上写死font-size: 16px - 若用
<blockquote></blockquote>表达引用段落，别再给它加text-indent—— 浏览器默认已有左右 padding，叠加后缩进过大
移动端与可访问性必须检查的两个细节
文章详情页在手机上打开时，缩进太浅等于没缩进；对视障用户来说，错误的缩进方式可能让屏幕阅读器把一段话读成两段。
真实踩坑案例：某新闻站用 text-indent: 2em + line-height: 1.2，结果 iOS Safari 下首行字和第二行字紧贴，缩进视觉被压缩感掩盖；另一站点用 开头，VoiceOver 直接把两个空格读作“空白、空白”，打断阅读节奏。
- 移动端建议最低缩进值设为
text-indent: 1.8em，并搭配line-height: 1.5保证行间呼吸感 - 永远不要用
<span style="margin-left: 2em"></span>或伪元素::before { content: " " }做首行缩进——它们会被读屏软件解析为内容，污染语义 - 如果详情页支持夜间模式或字体缩放，确保
text-indent单位是em或rem，禁用px
真正麻烦的从来不是怎么写那一行 text-indent，而是当富文本、响应式、可访问性、多端适配全堆在一个详情页里时，你得知道哪一层缩进正在悄悄覆盖另一层——上线前用 Chrome DevTools 的 Elements 面板逐级点开 computed 样式，比写十遍 CSS 都管用。
