text-indent是实现段落首行缩进最稳妥的CSS属性，所有现代浏览器均支持；推荐用2em或1.5em，避免像素值；禁用 、padding-left/margin-left模拟缩进；兼容IE8时需注意overflow截断问题。
用 text-indent 实现段落首行缩进最稳妥
所有现代浏览器都支持 text-indent，它是专为段落首行缩进设计的 CSS 属性，不会影响其他行或破坏盒模型。别用 padding-left 或 margin-left 代替，那会整体偏移整段文字，语义和行为都不对。
常见错误是给 <p> 加了 text-indent 却没设 white-space: normal（默认就是 normal，一般不用显式写），结果换行后第二行也缩进了——其实是因为内容里混了 或意外的空格，不是样式问题。
-
text-indent值推荐用2em（中文排版常用）或1.5em，避免用固定像素值（如32px），否则缩进在不同字号下不协调 - 若段落前有标题，且希望首段不缩进（如文章开头），可单独加类：
<p class="no-indent">...，再配.no-indent { text-indent: 0; } - 注意：
text-indent对display: inline元素无效，只作用于块级或 inline-block 等可设置宽度/换行的元素
避免用 手动塞空格缩进
有人在段首加多个 模拟缩进，这会导致 HTML 结构污染、复制粘贴时多出不可见字符、屏幕阅读器朗读异常，还可能被 Markdown 或 CMS 自动过滤掉。
更麻烦的是响应式场景：小屏下字体变小， 缩进量却不变，视觉上要么太挤要么太松。而 text-indent: 2em 会随字体大小自动缩放。
立即学习“前端免费学习笔记（深入）”；
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 如果后端富文本编辑器输出了带
- 绝对不要写成
<p> 这是段落…</p>—— 这不是样式，是数据污染
兼容老 IE 时的 text-indent 注意点
IE 6–8 支持 text-indent，但有个经典 bug：当父容器设置了 overflow: hidden 且子段落有较大 text-indent 时，首行可能被截断。这不是样式写错，是渲染引擎缺陷。
- 临时绕过方式：给
<p>加zoom: 1（触发 hasLayout）或改用overflow: visible - 如果必须兼容 IE8 且不能改父容器，可用
text-indent: 2em; margin-left: -2em; padding-left: 2em;组合模拟，但仅限兜底，别作为首选方案 - 现代项目（IE11+ 或完全不支持 IE）直接用
text-indent就行，无需 hack
需要悬挂缩进？用 text-indent 配负值
参考文献、术语解释等场景常需“悬挂缩进”（第一行靠左，其余行缩进），这时把 text-indent 设为负值，再用 padding-left 把整段右推即可。
p.hanging {
text-indent: -2em;
padding-left: 2em;
}
关键点在于：负 text-indent 只拉回首行，padding-left 是给整个盒子加内边距，两者叠加才实现视觉上的悬挂效果。别只设负 text-indent 而不加 padding-left，否则首行会溢出容器左侧。
这个技巧在 PDF 导出（通过 CSS @media print）或长列表排版中很实用，但要注意 padding-left 值必须 ≥ |text-indent|，否则文字会被裁切。
