最直接的方法是使用 text-indent: 2em；它仅缩进段落首行，适配字号且兼容 IE6+，避免用 padding-left/margin-left 或 JS 插入空格。
用 text-indent 最直接，但注意它缩进的是「第一行」
HTML 本身没有“段落首行缩进两个字符”的原生语义，必须靠 CSS。最常用也最符合中文排版习惯的是 text-indent 属性，但它只作用于段落的第一行——后续换行不会缩进，这点和 Word 里的“首行缩进”逻辑一致。
实操建议：
-
text-indent的值推荐用2em（不是2px或2ch），因为em相对于当前字体大小，能随字号自适应，中文场景下基本接近两个汉字宽度 - 避免写
text-indent: 2ch：虽然ch理论上是“0”字宽，但中文字体里ch并不等于一个汉字宽度，实测偏差大，尤其在 macOS / iOS 的 San Francisco 字体下 - 如果段落内含
<img>、<span>等行内元素，text-indent仍生效，无需额外处理
为什么不用 padding-left 或 margin-left
这两个属性会让整个段落块左移，破坏对齐——比如列表项里的 <p>、或与左侧导航栏并列时，会把整段文字挤出容器边界，视觉上像“错位”，而不是“缩进”。
更关键的是：它们影响的是盒模型的外边距或内边距，和排版意义上的“首行缩进”语义无关，后期维护容易混淆意图。
立即学习“前端免费学习笔记（深入）”；
常见错误现象：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 用
padding-left: 2em后，发现段落和上一段的垂直间距变大了（其实是 padding 挤占了行高空间） - 响应式断点下，
margin-left导致段落在小屏上水平滚动，而text-indent完全不受影响
需要兼容 IE8？别用 rem 或 vw 单位
text-indent 在所有浏览器中支持极好，包括 IE6+，但单位选择会影响兼容性：
-
2em：安全，IE6–Edge 全支持 -
2rem：IE9+ 支持，IE8 及以下会失效（回退为 0 缩进） -
2ch：Chrome 50+、Firefox 48+、Safari 12+，IE/Edge Legacy 完全不识别
如果你的项目还要求支持 IE8，就老老实实用 2em，别折腾单位转换。
自动加缩进？别依赖 JS 动态插空格
有人尝试用 JavaScript 在每个 <p> 开头插入两个 ，或者用 innerHTML.replace(/^/, ' ') —— 这种做法问题很多：
- 破坏语义：空格变成 DOM 节点，影响屏幕阅读器朗读
- 干扰样式：后续用
::first-line伪元素做特殊样式时，可能被干扰 - 性能隐患：大量段落时，字符串替换比纯 CSS 渲染慢得多，且无法响应字体变化
真正该花时间的地方，是统一好全局段落样式，比如在 CSS 里写一条：
p { text-indent: 2em; margin: 1em 0; }，然后让所有正文都走这个规则。
缩进看着小，但单位选错、误用盒模型、或绕开 CSS 用 JS 硬塞空格，都会在多端适配和可访问性上埋雷。
