text-indent是唯一语义正确、原生支持首行缩进的方式，但仅对块级元素生效；失效主因包括元素非块级、父容器为flex/grid、首行含内联替换元素、高权重样式覆盖、white-space设置冲突等，调试需检查Computed中display是否为block且text-indent值非零。
text-indent 是唯一语义正确、原生支持首行缩进的方式，但必须配合 text-align 才能稳定对齐；单独设 justify 不会自动带缩进，也不保证首行视觉到位。
为什么 text-indent 加了却没缩进
不是代码写错了，而是渲染条件没满足：
• <p> 被设成 display: inline 或 inline-block——浏览器不识别“首行”概念
• 父容器用了 display: flex 或 display: grid，<p> 的块级盒行为被覆盖
• 段落开头是 <img>、<svg> 等内联替换元素，缩进发生在该元素左侧，视觉上等于没动
• 某处高权重样式写了 p { text-indent: 0 !important }（常见于富文本编辑器输出）
• 用了 white-space: nowrap 或 white-space: pre——破坏换行，“首行”失去意义
最快验证方式：打开开发者工具 → 查看目标 <p> 的 Computed 标签页 → 确认 display 是 block，且 text-indent 的最终值不是 0。
text-indent 和 text-align 能一起用吗
能，而且是标准组合，但要注意前提：
• text-align: justify 必须作用在块级元素（如 <p>）上，不能写在 <span> 或 <div> 上
• text-indent 需显式声明，justify 不会自动带缩进
• 单行文本也能生效 text-indent，但 justify 无视觉表现（浏览器忽略）
• 若单元格里用了 text-align: center 或 right，text-indent 仍计算，但对齐方式会把文字拉回，结果“缩了又拉回”，看起来没动
调试技巧：临时给 <td> 加 background: #ff0，观察文字是否真向右偏移；若背景框内文字居左顶边，说明 text-indent 没触发，该换 padding-left。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
Flex/Grid 容器里缩进失效怎么办
这不是 bug，是格式化上下文变更的自然结果：
• 首选 padding-left: 2em：它不依赖“首行”语义，对 flex item / grid item 同样生效，视觉结果几乎一致
• 若必须保留 text-indent 语义（比如要兼容旧打印样式），给 <p> 显式加 display: block，并确保其 width 不是 auto（flex item 默认 width: auto 可能导致退化）
• 别在导航菜单、卡片标题这类本就不该有“段落缩进”语义的地方硬套 text-indent——那是间距问题，该用 margin-left 或 padding-left
立即学习“前端免费学习笔记（深入）”；
最常被忽略的是：缩进单位选 2em 虽稳妥，但若父容器设置了 font-size: 0（常见于清除 inline 元素间隙的 hack），子 <p> 的 2em 就变成 0px；此时需在 <p> 上重置 font-size，否则缩进彻底消失。
