text-indent是实现首行缩进的唯一正解，仅推第一行、保持后续行对齐、不改变盒模型；推荐用2em单位适配中文字号，避免margin-left或padding-left破坏排版逻辑与无障碍支持。
text-indent 是唯一正解，别碰 margin-left 或 padding-left
用 margin-left 或 padding-left 给 p 标签加缩进，看起来“动了”，但实际是整段左移，首行没被特殊对待，后续行也跟着偏，破坏文本对齐逻辑。更糟的是，它会干扰响应式断点、影响屏幕阅读器朗读顺序，还可能和父容器的 text-align 冲突。
text-indent 才是专为“首行缩进”设计的属性：只推第一行，其余行保持原位，不影响段间距、不改变块级盒模型，语义清晰且无障碍友好。
- 必须作用于块级元素（
p、div、li等），对span无效 - 值推荐用
2em，不是因为“习惯”，而是它随字体大小缩放，中文下稳定对应约两个字符宽度 - 避免用
px，比如20px—— 字号变大时缩进就显得太小，字号变小时又撑得过分
第一段不缩进怎么跳过？用 :first-of-type 或 class="no-indent"
导语、标题后紧跟的段落通常不该缩进，硬写 text-indent: 0 覆盖全局规则容易漏掉或冲突。最稳的方式是主动排除：
-
p:first-of-type { text-indent: 0; }—— 适合结构固定、首段总在最前的页面 -
p.no-indent { text-indent: 0 !important; }—— 更灵活，配合 CMS 或 Markdown 渲染时手动加类，比如富文本编辑器输出的首段 - 慎用
:nth-of-type(1)，如果p前有h2或div，它可能选错
注意：若用 !important，仅限覆盖内联样式（如某些编辑器强制写的 style="text-indent: 2em"），正常 CSS 层叠中尽量不用。
缩进失效的三个真实原因
写了 text-indent: 2em 却没反应？大概率不是代码写错，而是下面这些情况在暗中干扰：
-
p里有display: inline-block或float子元素 —— 它们会打断行盒（line box）生成，导致首行“不存在”可缩进的上下文 - 父容器设了
direction: rtl（从右向左）——text-indent会向右缩进，视觉上像消失了，其实它在工作 - 用了
white-space: pre或pre标签包裹 —— 此时空白符被保留，text-indent被忽略，浏览器优先尊重预格式化行为
调试时先检查 computed styles 中 text-indent 是否被计算为有效值，再顺着 DOM 往上查布局属性。
em 和 rem 在缩进里的实际差别
2em 和 2rem 都能用，但行为不同：
-
2em相对于当前p的font-size—— 如果段落自己设了font-size: 1.2rem，那text-indent: 2em就是2 × 1.2rem，缩进随本段字号变化 -
2rem相对于根元素（html）的font-size—— 全局统一，哪怕段落字号变大，缩进量也不变，容易在小屏上显得过大
中文排版中，段落缩进应随本段文字大小自然伸缩，所以 em 更合理。只有当你明确要求“所有段落缩进绝对一致”，才考虑 rem，但要同步控制根字号稳定性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
