最可靠方式是使用 css 的 text-indent 属性，如 p { text-indent: 2em; }，它专为首行缩进设计，语义正确、响应式友好且兼容所有现代浏览器。
用 text-indent 实现段落首行缩进最可靠
HTML 默认不保留段落开头的空格， 或连续空格会被浏览器合并为一个空格，无法稳定控制缩进量。真正可控、语义正确、响应式友好的方式是 CSS 的 text-indent 属性。
它专为「首行缩进」设计，不影响其他行，也不依赖 HTML 内容结构：
- 值推荐用
em（如2em），随字体大小自适应；避免固定px，否则在缩放或不同设备上易错位 - 对
<p></p>元素直接设置即可，无需额外包裹或 class（除非需差异化控制） - 注意：该属性对
display: inline元素无效，确保段落是块级元素（<p></p>默认就是）
p {
text-indent: 2em;
}
为什么不用 或 硬加空格
手动在 HTML 中写多个 或全角空格 表面看能“顶出”空格，但问题明显：
- 缩进量不可控：不同字体下
- 语义污染：把样式逻辑混进 HTML 内容，不利于维护和可访问性（屏幕阅读器可能读出多余空格）
- 响应式失效：缩放页面时，硬空格不会等比变化，常导致缩进过小或过大
- 编辑困难：每次改缩进都要改 HTML，而不是统一调 CSS
text-indent 在内联元素或富文本中不生效怎么办
如果段落内容是动态插入的富文本（比如从 CMS 或编辑器输出），且外层容器不是标准 <p></p>，而是 <div> 或 <code><span></span>，要注意：
立即学习“前端免费学习笔记（深入）”；
-
text-indent只对块级容器生效，若父元素是display: inline或inline-block，需先设display: block - 富文本中若用了
<br>
模拟段落，实际没闭合块级结构，text-indent不会触发——必须用真实块级标签（如<p></p>或带display: block的<div>） <li>某些编辑器（如 TinyMCE、Quill）默认输出 <code><p></p>，但可能被 CSS 重置清除了text-indent，检查是否被全局样式覆盖（可用浏览器开发者工具验证 computed 样式） - 在 RTL（右向左）语言环境（如阿拉伯语、希伯来语）中，
text-indent缩进方向自动跟随文本流向，无需额外处理 - 多列布局（
column-count）下，每列首行都会应用text-indent，符合预期 - 若段落前有浮动元素（如图片），
text-indent仍只作用于文字首行，不会影响浮动占位——这点比靠margin-left更干净 - 打印样式表中同样生效，无需额外声明
兼容性与特殊场景：移动端、RTL 文本、多列布局
text-indent 在所有现代浏览器包括 iOS Safari 和 Android Chrome 中完全支持，但有几点容易忽略：
text-indent 是唯一既符合规范又免踩坑的选择。
