text-indent是唯一靠谱的首行缩进方案，因其专为该场景设计、仅作用于首行、随字体缩放且语义清晰；而空格、margin-left和padding-left分别因浏览器空白压缩、整段偏移及破坏左边界对齐等问题不可靠。
直接用 text-indent，别敲空格、别用 、更别套 margin-left —— 这三类做法在真实项目里几乎都会出问题。
为什么 text-indent 是唯一靠谱的选择
浏览器默认会把连续空格、制表符、换行压缩成一个空格，所以你在 <p> 文字</p> 里敲四个全角空格，缩进效果既不一致也不可维护。而 text-indent 是 CSS 专为「首行缩进」设计的属性，只影响第一行起始位置，不干扰后续行对齐，且随字体大小缩放。
- 值推荐用
2em（不是32px），语义清晰，缩放时自动适配 - 它只对块级元素生效 ——
<p>默认就是，但若你用了<div>或富文本输出的内联容器，得先确认display: block - 负值如
text-indent: -1.5em可做悬挂缩进（参考文献常用）
text-indent 不生效？先查这三件事
常见现象：加了 style="text-indent: 2em;" 却没反应。大概率不是写错了，而是上下文出了问题。
- 目标元素实际是
display: inline或inline-block—— 打开开发者工具看 computed 的display值 - 父容器用了
display: flex或grid，且没触发 BFC，导致子<p>行为退化 —— 试加align-self: flex-start或显式设width: 100% - 被全局样式重置了，比如某处写了
p { text-indent: 0; }—— 用浏览器 devtools 的 computed 标签页验证最终值
什么时候真该用 或 <pre>？
它们不是缩进方案，而是「保留原始空白」的工具，适用场景非常窄：
立即学习“前端免费学习笔记（深入）”；
-
-
<pre>仅当内容本身需要严格保留空格与换行（如代码片段、ASCII 图、诗歌排版），但它会禁用自动换行、覆盖字体和行高，不能当缩进“补丁”用 - 混用风险：若
<pre>内同时有text-indent和开头空格，可能造成双缩进假象
padding-left 和 margin-left 为什么是坑
这两个属性会让整段文字向右偏移，不是“首行缩进”，视觉上会破坏段落左边界对齐。
- 加了
padding-left: 2em后，哪怕段落只有一行，左边也永远空出一块；而text-indent下第二行会紧贴左侧边缘 - 带背景色或边框时，
padding-left会让色块整体右移，像被推歪了一样 - 在响应式断点下，固定像素的
padding-left缩进不会随字号缩放，小屏上可能缩得太浅，大屏上又太深
真正难的不是写那行 text-indent: 2em，而是意识到：缩进不是“多打几个空格”的事，而是语义、渲染机制和响应式行为的综合判断。一旦开始在 HTML 里手动塞 或靠 div 嵌套模拟缩进，后面改字体、调字号、切主题时，就全是隐形雷。
