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