text-indent 失效主因是未触发“首行盒”渲染，常见于 display 非 block、flex/grid 容器内、white-space 限制、内联替换元素开头、高权重重置或 overflow 裁剪；验证应查 Computed 中 display 和 text-indent 计算值。
text-indent 加了却没缩进，大概率不是写错了，而是浏览器压根没触发“首行盒”渲染条件。
为什么 text-indent 在 <p></p> 上不生效
最常见原因是 <p></p> 实际不是块级元素：它可能被设为 display: inline 或 inline-block；也可能套在 display: flex 或 display: grid 容器里，导致块级上下文退化。浏览器只对生成标准块级框的元素计算首行缩进。
其他高频原因包括：
-
white-space: nowrap或white-space: pre破坏了“首行”的语义边界 - 段落开头是
<img alt="HTML段落缩进不生效的原因与解决方法" >、<svg></svg>这类内联替换元素，缩进发生在该元素左侧，视觉上等于没动 - 某处高权重样式写了
p { text-indent: 0 !important }（富文本编辑器输出常带这个） - 父容器设了
overflow: hidden且缩进值超出左边界，内容被裁掉
最快验证方式：打开开发者工具 → 查看目标 <p></p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill10246" title="HTML Text Extract"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20dee630206.jpg" alt="HTML Text Extract" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill10246" title="HTML Text Extract">HTML Text Extract</a>
<p>从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。</p>
</div>
<a href="/xiazai/skill10246" title="HTML Text Extract" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div> 的 Computed 标签页 → 确认 display 是 block，且 text-indent 的最终计算值不是 0。
立即学习“前端免费学习笔记（深入）”；
text-indent 单位该用 em 还是 px？
中文排版下推荐 text-indent: 2em，不是因为它“等于两个汉字”，而是因为 em 随当前字体大小等比缩放，系统放大、阅读模式切换时缩进仍协调。固定像素如 32px 在高 DPI 屏或用户 zoom 页面时容易失准。
需避开的坑：
-
2%：按父容器宽度算，窄屏下缩进可能只剩几像素 -
2rem：若项目用 JS 动态改过html { font-size }（如夜间模式），缩进会跳变 -
2ch：语义更贴近单字宽度，但 IE 不支持，且多数中文字体中1ch明显小于一个汉字
表格单元格（<td>）里 <code>text-indent 失效怎么办
<td> 默认是 <code>display: table-cell，它虽属块级上下文，但格式化规则特殊：若内容太短、未换行，浏览器常不生成“首行盒”，text-indent 就悬空了。
别硬调 text-indent，直接用更稳的方案：
- 给
<td> 加 <code>padding-left: 2em：不依赖换行，所有场景都生效，视觉一致 - 需要保留首行语义（比如导出 PDF）时，用
<td><div style="text-indent: 2em;">内容</div></td> - 绝对不要对整个
<table> 设 <code>text-indent：它会继承到<th>，表头也被缩进 <h3>Flex/Grid 容器里的子段落缩不进去</h3> <p>这不是 bug，是格式化上下文变更的自然结果。<code>text-indent在 flex item 或 grid item 上表现不稳定，尤其当justify-content或align-items干扰了主轴对齐时，缩进常被忽略或错位。实际项目中，90% 的需求只是“第一行看起来往右移一点”，而非强依赖“首行盒”语义：
- 首选
padding-left: 2em：对任意display类型都有效，响应式友好，和text-indent视觉差异极小 - 必须保留语义时，给
<p></p>显式加display: block，并确保其width不是auto（flex item 默认就是auto，可能退化） - iOS Safari 在 flex 容器内偶有渲染延迟，可加
transform: translateZ(0)强制硬件加速（仅必要时）
最容易被忽略的一点：缩进失效往往不是 CSS 写得不对，而是你正在调试的元素，它的
display值早被某处样式、JS 或框架悄悄改掉了——先看 Computed，再改代码。 - 首选
