text-indent 可继承但仅对参与首行格式化的块级元素生效；若子元素 display 非 block/table-cell/list-item、或处于 flex/grid 容器、或受 white-space: nowrap 等影响，则无缩进效果。
text-indent 会继承，但只对块级元素生效
继承本身没问题，text-indent 是 CSS 中明确声明“可继承”的属性；问题常出在“谁继承了、却没表现出来”。最典型的情况是：父元素设了 text-indent: 2em，子 <p> 却没缩进——不是继承失败，而是该 <p> 被设成了 display: inline 或处在 flex 容器里，导致它压根不参与“首行”格式化。
关键验证点：打开开发者工具 → 查看目标元素的 Computed 样式 → 确认 display 值为 block（或 table-cell、list-item 等能触发首行格式化的值），且 text-indent 的最终计算值不为 0。
- 继承链中任意一级显式设
text-indent: 0或text-indent: 0 !important，都会中断后续继承 -
white-space: nowrap或pre类值会让“首行”概念失效，即使继承了也无视觉效果 - 如果父容器是
display: grid或display: flex，子元素默认变成 flex item / grid item，其display计算值可能退化为block，但宽度行为异常，此时需显式加width: 100%或display: block
父元素 text-indent 影响子元素的前提条件
父元素设 text-indent，子元素是否缩进，取决于它是否“属于父元素的文本流”。比如：
<div style="text-indent: 2em">父文本<p>子段落</p></div> —— 这里 <p> 是独立块盒，不继承父的缩进；但若写成
<div style="text-indent: 2em">父文本<br>换行后还是父文本</div>，换行后的那行才会缩进。
立即学习“前端免费学习笔记（深入）”；
- 只有纯文本节点（或
inline元素）在父元素内自然换行时，才受父级text-indent影响 - 子
<p>、<h2>等块级元素会建立自己的格式化上下文，不继承父的首行缩进逻辑 - 例外：表格单元格（
<td>）默认是display: table-cell，支持text-indent继承，且会作用于单元格内第一行文本
inherit 值在 IE8 及更早版本中不被支持
虽然规范允许用 text-indent: inherit 显式声明继承，但 inherit 这个关键字在 IE8 及更早版本中完全无效。实际项目中若还需兼容这类旧环境，得换策略：
- 避免写
text-indent: inherit，直接省略该声明，靠默认继承行为即可 - 若必须覆盖某处重置（如富文本编辑器输出的
text-indent: 0 !important），改用具体值，如text-indent: 2em - 注意：IE8 支持负值（
-1em）和百分比（5%），但计算不稳定，尤其在direction: rtl下易错位
嵌套块级元素中的缩进传递要靠显式设置
常见误区是以为给外层 <div id="article"> 设了 text-indent: 2em，里面所有 <p> 就自动缩进了。事实是：每个 <p> 都需要自己声明 text-indent 才生效。这不是缺陷，而是设计使然——段落缩进是语义行为，不是布局偏移。
- 推荐统一用类控制：
.paragraph { text-indent: 2em; }，然后所有段落都加class="paragraph" - 用属性选择器批量处理：
p:not([class*="no-indent"]) { text-indent: 2em; }，再给首段或特殊段加class="no-indent" - 慎用通配符继承写法如
* { text-indent: 2em; }，它会让<button>、<input>等非文本块也尝试缩进，多数无效且干扰调试
真正容易被忽略的是：text-indent 的继承不是“样式复刻”，而是“行为授权”——父元素只是把“可以缩进首行”这个能力传下去，子元素得自己决定要不要用、怎么用。一旦子元素脱离了块级文本流（比如被 flex 包裹、被设为 inline、开头塞了个 <img>），这个能力就悬空了，不会报错，也不会提醒。
