text-indent 失效主因是未满足块级格式化上下文条件，仅对 block 元素首行生效；需检查 computed 样式中 display 是否为 block 且 text-indent 值非零。
text-indent 不生效，绝大多数情况不是写错了，而是渲染条件没满足——它只对块级格式化上下文里的第一行盒起作用，其他都是干扰项。
为什么 text-indent 加了却像没加
最直接的判断方式：打开浏览器开发者工具 → 找到目标 <p> → 切到 Computed 标签页 → 看 display 是否为 block，且 text-indent 最终值是否非零。
常见失效原因包括：
-
<p>被设成display: inline或inline-block—— 浏览器不生成“首行盒”，text-indent完全忽略 - 父容器用了
display: flex或display: grid——<p>的块级行为被覆盖，缩进计算失效 - 段落开头是
<img>、<svg>或<span style="display:inline-block">—— 首行盒起点落在该元素左侧，文字本身没动 - 被高权重样式覆盖，比如全局重置里写了
p { text-indent: 0 !important } -
white-space: nowrap或pre类设置破坏了“换行”语义，导致首行概念丢失
text-indent 在 Flex/Grid 容器里失效怎么办
这不是 bug，是 CSS 格式化上下文变更的自然结果。Flex item 和 Grid item 默认不参与块级格式化，text-indent 失去作用对象。
立即学习“前端免费学习笔记（深入）”；
实操建议：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 首选
padding-left: 2em—— 对任意display类型都有效，视觉几乎无差别，且响应式友好 - 若必须保留语义（如打印样式），给
<p>显式加display: block，并确保其width不是auto（flex item 默认值可能退化） - 别在卡片标题、导航文字等本就不该有段落语义的地方硬套
text-indent—— 那是间距问题，该用margin-left或padding-left
移动端和微信 WebView 中缩进“看起来没生效”
iOS Safari（尤其旧版）和微信内置浏览器对小字号文本的 text-indent 渲染较保守：当 <p> 的 font-size 小于 16px，或父容器有 -webkit-text-size-adjust: none，缩进常被跳过。
临时绕过方法：
- 给
<p>显式设font-size: 16px或更大再试 - 避免同时使用
transform: scale()或zoom，它们会干扰文本度量 - 微信中可加极小 hack：
text-indent: 2em; margin-left: 0.05em;—— 这个微小外边距有时能“唤醒”渲染引擎
首段不缩进，但其他段落要缩进
别用 p:first-child，它依赖 <p> 是父容器的第一个子元素；而实际 HTML 常在段落前有 <h1>、<div class="hero"> 等，导致选择器完全不匹配。
正确做法是：
- 用
p:first-of-type—— 它只看同类型元素（即所有<p>）中的顺序，不受其他标签干扰 - 加父级前缀提升优先级，例如
article p { text-indent: 2em; } article p:first-of-type { text-indent: 0; } - 确保 HTML 中确实存在多个
<p>，否则:first-of-type不会触发 - 若段落分散在不同容器（如
<div class="intro"><p>和<main><p>），需分别控制，或改用更精确的选择器如.article-content p:first-of-type
真正容易被忽略的是：缩进是否生效，不能只靠肉眼判断；必须看 Computed 样式里 text-indent 的最终值，以及 display 是否为 block。很多“失效”其实是被更高优先级样式静默覆盖，或者父容器布局模式彻底绕过了块级格式化上下文。
