text-indent未生效的根源是浏览器未触发首行缩进渲染条件，需通过开发者工具Computed面板验证display是否为block且text-indent计算值非零，常见原因包括display:inline/inline-block、flex/grid布局、内联替换元素开头、!important覆盖、white-space限制及table-cell特性。
text-indent写了但段落不动，怎么查
不是代码没生效，而是浏览器压根没触发首行缩进的渲染条件。最直接的验证方式：打开开发者工具 → 找到目标 <p></p> → 切到 Computed 面板 → 看 display 是否为 block，且 text-indent 的最终计算值是否非零。
常见卡点包括：
-
<p></p>被设成display: inline或inline-block—— 这类元素不生成“首行盒”，text-indent直接被忽略 - 父容器用了
display: flex或display: grid—— 子p变成 item，格式化上下文切换导致语义退化 - 段落开头是
<img alt="HTML文章段落缩进常见错误怎么改" >、<svg></svg>等内联替换元素 —— 缩进作用在该元素左侧，视觉上等于没动 - 存在高权重样式如
p { text-indent: 0 !important; }（富文本编辑器输出里很常见） -
white-space: nowrap或white-space: pre—— 没换行，“首行”就不存在
表格里 td 中的段落缩不进去怎么办
td 默认是 display: table-cell，它不生成标准的块级行盒（line box），所以 text-indent 在短内容、未换行时大概率失效。
别硬调 text-indent，直接换思路：
立即学习“前端免费学习笔记（深入）”；
- 最稳方案：
td, th { padding-left: 2em; }—— 不依赖行盒，所有浏览器都认 - 若必须保留首行缩进语义（比如导出 PDF 要匹配印刷规范）：
<td><div style="text-indent: 2em;">内容</div></td> - 调试时临时加
background: #ff0到td，看文字是否真向右偏移；如果背景框里文字还贴左，说明text-indent没触发，立刻切到padding-left
首段不缩进，其他段落缩进，为什么 :first-child 总是失灵
因为 p:first-child 要求 <p></p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20d3191a227.jpg" alt="DeepBI DHTML 页面生成器" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器">DeepBI DHTML 页面生成器</a>
<p>生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力：
- 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面；
- 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”；
- 提及位于 `apps/console/src/featur</p>
</div>
<a href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div> 是其父容器的第一个子元素，而实际 HTML 常在正文前有 <h1></h1>、<div class="hero"> 等，导致选择器根本匹配不到。
<p>改用语义更准的选择器：</p>
<ul>
<li>用 <code>p:first-of-type —— 它只看同类型（p）元素中的顺序，不受前面其他标签干扰
.article p { text-indent: 2em; } + .article p:first-of-type { text-indent: 0; }
<div> 里，否则它会和正文 <code>p 分属不同父级，各自都算“第一个”
<p></p> 或仅含空白符的段落，它们也会被 :first-of-type 计入Flex/Grid 容器中缩进失效，能强行修好吗
不能靠加 display: block 硬救 —— 这种写法在某些场景下看似有效，但不可靠，尤其跨浏览器或响应式变化时容易回退。
真正该做的是承认布局语义的切换，换一套视觉逻辑：
- 统一用
p { padding-left: 2em; }替代text-indent，它对任何display类型都起作用 - 注意副作用：这会让整段左移，若段内用了
text-align: justify，需同步检查两端对齐是否被破坏 - 如果是导航栏、卡片标题等地方误用了
<p></p>，别强行缩进 —— 那本质是间距问题，该用margin-left或容器的gap - 若项目中多处需要“首段不缩进”，建议抽成 CSS 自定义属性：
.text-block { --indent: 2em; }+.text-block p { text-indent: var(--indent); }+.text-block p:first-of-type { text-indent: 0; }
真正难的不是写出 text-indent: 2em，而是确认它在表格里、Flex 容器里、富文本输出的 HTML 里、打印预览里……每个环境都按预期工作。动手前先盯紧 Computed 面板，比反复试数值管用得多。
