text-indent: 2em 是唯一正确的段落首行缩进写法，它仅作用于首行开头，兼容 justify 对齐，且 em 单位适配缩放；padding-left/margin-left 会导致整段平移或布局崩溃。
直接用 text-indent: 2em，别碰 padding-left 或 margin-left —— 后者不是缩进，是平移。
为什么 text-indent: 2em 是唯一靠谱的写法
它只推第一行开头，后续行、内嵌图片、span、em 全都不动，也不影响 text-align: justify 对齐。用 padding-left 会让整段文字右移，第二行也跟着缩，小屏下容易溢出；margin-left 更糟，会挤垮父容器的 flex 布局或 grid 栅格。
单位必须用 em：
- 2em ≈ 当前字号下的两个汉字宽度，放大字体或系统缩放时自动适配
- 别用 32px（高 DPI 下变窄）、2%（窄屏缩成几像素）、2rem（若根字体被 JS 动态改过，缩进会跳变）
text-indent 加了却没反应？先查这五点
不是代码错了，是渲染条件不满足：
-
display不是block：比如p被设成inline或富文本编辑器强制加了display: inline-block - 父容器用了
display: flex或display: grid：这类格式化上下文会绕过text-indent，此时得换padding-left: 2em - 段落开头是
<img>、<svg></svg>等内联替换元素：缩进作用在它左边，但视觉上“看不见” - 被高权重样式覆盖：CMS 富文本常输出
style="text-indent: 0 !important"，得用更具体选择器覆盖 - 首行含换行符、空格或
white-space: nowrap：破坏“首行盒”生成，缩进计算值可能为 0
最快验证法：打开开发者工具 → Computed 面板 → 看目标 p 的 display 是否为 block，且 text-indent 最终值是不是你写的 2em。
表格里 td 和 th 缩进总失效，怎么办
td 默认是 display: table-cell，不生成标准“首行盒”，尤其内容短、未换行时，text-indent 基本等于摆设。
两个真能落地的方案：
- 日常网页显示：
td, th { padding-left: 2em; }——不依赖行盒，所有浏览器都认，响应式也稳 - 导出 PDF 或印刷场景需语义正确：
<td><div style="text-indent: 2em;">内容</div></td>，把缩进包进块级子元素里
调试技巧：临时给 td 加 background: #ff0，如果背景框里文字还贴左顶边，说明 text-indent 根本没触发，立刻切到 padding-left。
统一缩进但要排除首段、标题、引用这些例外
全局设 p { text-indent: 2em; } 很方便，但排版规则要求首段不缩进、标题类段落不缩进、引用段落甚至要反向缩进。
推荐显式重置，别用复杂 :not()：
- 首段清缩进和上边距：
p:first-of-type { text-indent: 0; margin-top: 0; } - 标题段落（如
<p class="title"></p>）：p.title { text-indent: 0; } - 引用段落反向缩进：
blockquote p { text-indent: -1em; padding-left: 1em; }（负缩进 + 左内边距防文字溢出）
真正难的不是写对那行 text-indent: 2em，而是确认它在所有上下文里都按预期工作：Flex 容器里、表格单元格里、富文本插入的 HTML 里、打印预览里……每个环境都可能悄悄绕过这个属性。动手前先盯紧 Computed 面板，比反复调数值管用得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
