text-indent 在嵌套结构中失效，是因为父容器的 display（如 flex、grid）或子元素（如 inline-flex、img）改变了段落所处的格式化上下文，使其脱离块级上下文；它仅对块级盒中的首行生效。
text-indent 在嵌套结构里为什么失效
不是样式没写，而是嵌套后元素的 display 或格式化上下文变了。text-indent 只对块级盒（block formatting context）中的“首行盒”生效。常见失效场景包括：
-
<p></p>被父容器设为display: inline-block或display: flex子项，它就不再是独立块级上下文 - 嵌套在
<div> 里，但该 <code><div> 加了 <code>display: grid，且未显式触发 BFC - 段落开头是
<img>、<svg></svg>或<span></span>（含display: inline-flex），缩进作用在该内联替换元素左侧，视觉上等于没动 - 富文本编辑器输出的 HTML 常带内联
style="text-indent: 0 !important"，直接覆盖你的规则 - 给父容器加
display: block（显式重置，避免继承干扰） - 若父容器是
flex或grid，不要指望<p></p>自动保持块级行为；改用<div> 包一层再设 <code>text-indent - 嵌套层级深时，用类名精准控制，避免通配符污染：
.article-content p { text-indent: 2em; }，而非全局p { text-indent: 2em; } - 遇到
<blockquote></blockquote>、<figure></figure>等语义容器，它们默认是块级，但内部<p></p>仍需单独声明text-indent，因为不继承
最快验证方式：打开开发者工具 → 查看目标 <p></p> 的 Computed 标签页 → 确认 display 是 block，且 text-indent 的最终值不是 0。
嵌套中正确设置 text-indent 的写法
核心原则：确保 <p></p> 所在的渲染上下文仍是标准块级流。实操建议如下：
示例：
<article class="post"><div class="content">
<p>这是首行缩进的段落。</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill10246" title="HTML Text Extract"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20dee630206.jpg" alt="HTML Text Extract" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill10246" title="HTML Text Extract" class="overflowclass">HTML Text Extract</a>
<p class="overflowclass">从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。</p>
</div>
<a rel="nofollow" href="/xiazai/skill10246" title="HTML Text Extract" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<blockquote>
<p>引用段里的段落也要缩进——需单独写规则</p>
</blockquote>
</div>
</article>
CSS 中应写：
.post .content p,
.post blockquote p {
text-indent: 2em;
}
嵌套中误用 padding-left 的后果
很多人图省事，在嵌套结构里对 <p></p> 直接加 padding-left 模拟缩进，这会破坏排版逻辑：
-
padding-left让整段左移，不是“首行缩进”，text-align: justify会失效 - 响应式下固定像素值（如
32px）在小屏可能溢出容器，或与父容器padding叠加造成错位 - 若段落内含
display: inline-block子元素（如图标按钮），padding-left可能触发新的 BFC，反而让文字对齐异常 - 打印或 PDF 导出时，
padding-left表现稳定，但语义错误 —— 它不是排版意义上的“首行缩进”
真正需要整体偏移时，优先用 margin-left（影响外边距），而非 padding-left（影响内边距）。
嵌套结构中单位选 2em 还是其他
嵌套越深，单位选择越关键。推荐统一用 2em：
-
2em是相对于当前<p></p>元素自身font-size的值，嵌套中字体可能被父级修改，缩进自动适配，不会“突然变小” -
2ch理论更准（1ch ≈ 字符 “0” 宽度），但 IE 不支持，且多数中文字体下 1ch 远小于一个汉字，实际效果不可控 -
32px在嵌套中极易失准：父容器用了font-size: 14px，子段落却是font-size: 18px，32px 缩进就显得太窄 -
2%基于包含块宽度计算，嵌套多层后宽度层层缩小，缩进可能只剩几像素，完全达不到“两字符”效果
特别注意：如果项目用了 JS 动态改 html { font-size }（如根据屏幕宽度切换），2rem 会导致缩进随根字号跳变，破坏段首对齐节奏 —— 这种场景下，2em 仍是唯一靠谱选择。
