text-indent 是唯一正确且语义清晰的首行缩进手段，仅对块级元素生效，推荐值为 2em，负值可实现悬挂缩进，rtl 下自动右缩进，失效常见于 display 非 block、首行含浮动元素或 white-space 抑制换行等情况。
text-indent 是唯一正确且语义清晰的手段
直接敲空格、用 堆叠，或靠 margin-left/padding-left 模拟，都会破坏排版逻辑和响应式行为。只有 text-indent 是浏览器原生支持首行缩进的 CSS 属性，它只推第一行，后续行左对齐，符合中文段落规范。
它仅对块级元素生效——<p></p>、<div>、<code><td>（默认为 <code>display: table-cell）都 OK；但 <span></span> 或内联子元素加了无效，除非显式设 display: block。
-
text-indent: 2em是推荐值：1em ≈ 当前font-size，缩进随字号缩放，视觉稳定 - 避免
text-indent: 32px：系统放大字体或高 DPI 屏幕下会显得过窄 - 负值如
text-indent: -1.5em可实现悬挂缩进（参考文献常用） - 在
direction: rtl下，text-indent自动右缩进，无需手动翻转
为什么加了 text-indent 却没缩进？常见失效场景
不是代码写错，而是渲染条件被破坏。打开开发者工具，检查目标元素的 Computed 面板，确认以下几项：
-
display是block（不是inline、inline-block或 flex/grid 子项未重置） -
text-indent最终计算值不为0（可能被富文本编辑器输出的!important覆盖） - 首行开头没有浮动元素或内联替换元素（如
<img>），否则缩进发生在该元素左侧，视觉上“消失” - 没启用
white-space: nowrap或white-space: pre——这些会压制换行，“首行”概念失效 - 父容器没设
overflow: hidden且内容未折行，缩进部分可能被裁掉
首段不缩进、列表项缩进、表格单元格缩进怎么处理
不同结构需差异化控制，不能靠全局 p { text-indent: 2em } 一招打天下：
- 首段跳过缩进：
p:first-of-type { text-indent: 0; margin-top: 0; }（导语、标题后第一段常需视觉起始感） - 列表中
<li>内含段落：给li p单独设text-indent，避免影响li本身的项目符号对齐 <td> 中缩进：有效，但注意 <code>text-align: center或right会把文字拉回，导致缩进“不可见”；可临时加background: #ff0确认缩进区域是否真实偏移- Flex/Grid 容器里的
<p></p>：text-indent可能因格式化上下文退化而失效；优先改用padding-left: 2em，效果一致且更可靠 -
line-height控制行高，不影响缩进位置；但若font-size变化大，2em缩进的视觉宽度也会变，这是预期行为 -
margin（尤其是margin-top/margin-bottom）管段间距，和text-indent各司其职；用padding模拟段距会撑高容器，引发 flex/grid 对齐偏差 - 别在同一个元素上同时依赖
text-indent和text-align: justify来“修复对齐”——justify不自动带缩进，必须显式声明text-indent - 真正难调的是嵌套块：比如
<p></p> <p>子段落</p>，内层<p></p>会继承外层缩进后的起始位置，需重置text-indent: 0
text-indent 和 line-height、margin 的协作边界
text-indent 只管首行水平起点，它和垂直方向的排版属性互不干扰，但混用时容易误判效果：
