text-indent 是首行缩进唯一语义正确方案，仅推首行且兼容两端对齐与响应式；须用 em 单位、配合 margin 控制段间距，表格中需用 padding-left 或嵌套 div 保障生效。
text-indent 是首行缩进的唯一语义正确方案
它只推第一行，不影响后续行位置，也不破坏 text-align: justify 或响应式对齐。用 padding-left 或 margin-left 模拟缩进，本质是整段左移，会导致：
- 两端对齐失效（文字被硬挤出边界）
- 小屏下缩进值固定，容易溢出容器
- 与父容器的
padding或border叠加，造成意外交互 - 富文本插入的
img、svg等内联替换元素可能吞掉缩进效果
正确写法就是：p { text-indent: 2em; }。单位必须用 em——1em ≈ 当前字号，放大字体时缩进同步变宽，视觉上始终接近“两字符”，比 px、%、rem 都稳。
段间距必须用 margin，不是 padding
margin 控制段与段之间的空隙，padding 是段落内部留白，混用会撑高容器、干扰 flex/grid 对齐，还可能触发 margin 折叠异常。
推荐组合：
-
p { margin: 1.2em 0; }—— 上下等距，浏览器默认折叠行为可预测 -
p:first-of-type { margin-top: 0; text-indent: 0; }—— 首段不缩进、无上边距，符合中文排版习惯 - 避免写
p { padding-top: 1.2em; }，它会让段落内容整体下移，但段落盒高度不变，视觉错位明显
常见失效场景和快速验证法
加了 text-indent: 2em 却没反应？别改数值，先查渲染条件是否满足：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 打开开发者工具 → Computed 面板 → 确认目标
p的display是block（不是inline或flex） - 检查父容器是否用了
display: flex或display: grid—— 这类格式化上下文会绕过 text-indent，此时该换padding-left: 2em - 看
text-indent最终计算值是不是0，如果是，说明被!important覆盖（常见于 CMS 富文本输出） - 段落开头有
white-space: nowrap，也会让缩进“看不见”
临时加 background: #ff0 到 p 上，能一眼看出文字是否真偏移：背景框里文字贴左，说明缩进根本没生效。
表格单元格（td/th）里怎么缩进
td 默认是 display: table-cell，不生成标准“首行盒”，text-indent 极易失效，尤其内容短、未换行时。
稳妥做法只有两个：
- 直接写
td, th { padding-left: 2em; }—— 不依赖行盒，所有浏览器都认 - 若导出 PDF 必须保留首行缩进语义，就包一层
div：<td><div style="text-indent: 2em;">内容</div></td>
别在 td 上硬试 display: block + text-indent，width:auto 下容易退化，且打印样式可能不一致。
真正难的不是写出 text-indent: 2em，而是确认它在表格里、Flex 容器里、富文本输出的 HTML 里、甚至打印预览中，都按预期生成了 line box 并被计算。动手前盯紧 Computed 面板，比反复调数值管用得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
