text-indent是唯一语义正确、兼容性最稳的首行缩进方案；它仅作用于块级元素首行，而padding-left/margin-left会整体偏移段落，破坏对齐与响应式。
text-indent 是唯一语义正确、浏览器兼容性最稳的首行缩进方案，别用 padding-left 或 margin-left 伪装缩进——它们改的是整个块的位置，不是排版意义上的“首行空两格”。
为什么直接写 p { text-indent: 2em; } 有时没效果
常见错误现象：刷新页面后段落纹丝不动，或只对部分段落生效。
- 父容器设置了
overflow: hidden或display: flex，导致text-indent的渲染被截断或忽略 -
p标签内开头有空格、换行符或text-indent会和这些空白叠加，视觉上反而错乱 - 样式被更高优先级规则覆盖，比如某处写了
p { text-indent: 0 !important; } - 用了
rem单位（如2rem），而根元素font-size是 16px，结果缩进 32px —— 远超中文字符宽度，看起来像整段右移
text-indent 在表格单元格（td/th）里不生效怎么办
因为 td 默认是 display: table-cell，它不生成标准的“首行盒”，text-indent 就容易失效，尤其内容短、未换行时。
- 最稳妥的替代方案：
td, th { padding-left: 2em; }—— 不依赖行盒，所有浏览器都认 - 若必须保留首行缩进语义（比如导出 PDF 需匹配印刷规范），用包裹
div：<td><div style="text-indent: 2em;">内容</div></td> - 调试时加
background: #ff0到td，看文字是否真偏移；如果背景框里文字还贴左，说明text-indent没触发，立刻切到padding-left
统一缩进但要排除某些段落（比如标题、引用、首段）
全局设 p { text-indent: 2em; } 很方便，但实际排版中常需例外处理。
- 首段不缩进：
.content p:first-child { text-indent: 0; } - 引用段落反向缩进：
blockquote p { text-indent: -1em; padding-left: 1em; }（负缩进 + 左内边距防文字溢出） - 标题类段落（如
<p class="title"></p>）：p.title { text-indent: 0; font-weight: bold; } - 避免用
:not()写复杂选择器，CSS 优先级易失控；宁可显式加类、再单独重置
真正难的不是写对那行 text-indent: 2em，而是确认它在所有上下文里都按预期工作：表格里、Flex 容器里、富文本输出的 HTML 里、打印预览里……每个环境都可能悄悄绕过这个属性。动手前先打开开发者工具，盯着 Computed 面板看 text-indent 是否被计算、是否被覆盖、是否生成了 line box —— 这比反复试数值管用得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
