text-indent 失效主因是浏览器未生成“首行盒”，仅在块级上下文且内容换行时生效；常见场景包括 display 非 block、flex/grid 容器、内联替换元素开头、white-space: nowrap 等。
text-indent 为什么对
没反应
不是 CSS 写错了，而是浏览器根本没生成“首行盒”：text-indent 只在块级上下文中生效，且依赖内容换行。常见失效场景包括：
-
<p></p>被设为display: inline或inline-block—— 浏览器不识别“首行”概念 - 父容器用了
display: flex或display: grid，<p></p>的块级行为被覆盖 - 段落开头是
<img>、<svg></svg>等内联替换元素，缩进发生在该元素左侧，视觉上等于没动 - 富文本编辑器输出的
<p style="text-indent: 0 !important"></p>直接覆盖你的规则 - 用了
white-space: nowrap或pre，破坏换行，“首行”失去意义
最快验证方式：打开开发者工具 → 查看目标 <p></p> 的 Computed 标签页 → 确认 display 是 block，且 text-indent 的最终值不是 0。
blockquote 的嵌套缩进怎么写才不踩坑
直接用嵌套选择器比加 class 更可靠，也避免 HTML 层面污染：
blockquote { padding-left: 2em; border-left: 3px solid #999; }
blockquote blockquote { padding-left: 2.5em; border-left-color: #666; }
blockquote blockquote blockquote { padding-left: 3em; border-left-color: #444; }
注意三点：
- 别用
text-indent：它在blockquote内部的<p></p>上可能因父容器样式（如margin重置）而失效；padding-left更稳定 - 每层增加
0.5em左右即可，加太多会挤压可读宽度，尤其在移动端 - 某些 CMS（如 WordPress）会把连续换行转成
<p></p>，确保这些<p></p>继承了blockquote的padding-left，而不是被重置
表格里 的缩进为什么总失效
text-indent 在 <td> 和 <code><th> 中常失效，因为它们默认是 <code>display: table-cell，不是标准块级元素。即使写了 text-indent: 2em，也可能看不见效果——尤其是短文本未换行时，浏览器不生成明确“首行盒”。
真正有效的做法只有两个：
-
首选
padding-left: 2em：不依赖首行语义，所有浏览器都认，打印、PDF 导出也更稳
-
必须保留
text-indent 语义时，用包裹 <div>：<code><td><div style="text-indent: 2em;">内容</div></td>
调试技巧：临时给 <td> 加 <code>background: #ff0，观察文字是否真向右偏移；如果背景框内文字仍贴左顶边，说明 text-indent 没触发，立刻切到 padding-left。
首段不缩进 + 引用段反向缩进怎么组合写
全局设 p { text-indent: 2em; } 很方便，但实际排版中必须处理例外：
- 首段不缩进：
.content p:first-of-type { text-indent: 0; margin-top: 0; }
- 引用段反向缩进（比如
<blockquote><p></p></blockquote>）：blockquote p { text-indent: -1em; padding-left: 1em; } —— 负缩进 + 左内边距防文字溢出
- 标题类段落（如
<p class="title"></p>）：p.title { text-indent: 0; font-weight: bold; }
避免用 :not() 写复杂选择器，CSS 优先级容易失控；宁可显式加类，再单独重置。真正难的不是写出这几行，而是确认它们在富文本输出、Flex 容器、打印预览、不同字号下都按预期工作——漏掉一个上下文，就可能整篇排版错位。
text-indent 在 <td> 和 <code><th> 中常失效，因为它们默认是 <code>display: table-cell，不是标准块级元素。即使写了 text-indent: 2em，也可能看不见效果——尤其是短文本未换行时，浏览器不生成明确“首行盒”。
真正有效的做法只有两个：
-
首选
padding-left: 2em：不依赖首行语义，所有浏览器都认，打印、PDF 导出也更稳 -
必须保留
text-indent语义时，用包裹<div>：<code><td><div style="text-indent: 2em;">内容</div></td>调试技巧：临时给
<td> 加 <code>background: #ff0，观察文字是否真向右偏移；如果背景框内文字仍贴左顶边，说明text-indent没触发，立刻切到padding-left。首段不缩进 + 引用段反向缩进怎么组合写
全局设
p { text-indent: 2em; }很方便，但实际排版中必须处理例外：- 首段不缩进：
.content p:first-of-type { text-indent: 0; margin-top: 0; } - 引用段反向缩进（比如
<blockquote><p></p></blockquote>）：blockquote p { text-indent: -1em; padding-left: 1em; }—— 负缩进 + 左内边距防文字溢出 - 标题类段落（如
<p class="title"></p>）：p.title { text-indent: 0; font-weight: bold; }
避免用
:not()写复杂选择器，CSS 优先级容易失控；宁可显式加类，再单独重置。真正难的不是写出这几行，而是确认它们在富文本输出、Flex 容器、打印预览、不同字号下都按预期工作——漏掉一个上下文，就可能整篇排版错位。 - 首段不缩进：
