text-indent是唯一语义正确的首行缩进手段，但仅对块级元素生效；失效主因是元素非块级、父容器为flex/grid、首行含替换元素、高权重样式覆盖或white-space禁用换行。

text-indent 是唯一语义正确、浏览器原生支持的首行缩进手段，但必须满足块级渲染条件，否则写了也白写。

为什么 text-indent 加了却没效果

不是 CSS 写错了，而是浏览器压根没触发“首行”计算逻辑：

• <p></p> 被设成 display: inline 或 inline-block —— 块级盒模型不成立，“首行”概念失效
• 父容器用了 display: flex 或 display: grid —— <p></p> 作为子项，格式化上下文被重置
• 段落开头是 <img>、<svg></svg> 等内联替换元素 —— 缩进发生在该元素左侧，视觉上等于没动
• 某处高权重样式写了 p { text-indent: 0 !important } —— 富文本编辑器导出 HTML 时高频踩坑点
• 用了 white-space: nowrap 或 white-space: pre —— 换行被禁用，“首行”失去意义

最快验证方式：打开开发者工具 → 查看目标 <p></p> 的 Computed 标签页 → 确认 display 是 block，且 text-indent 的最终值不是 0。

text-indent 该用什么单位才靠谱

单位选错，缩进在不同设备或系统设置下就会“看起来不对”：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 2em：最稳妥。1em ≈ 当前 font-size，缩进随字号放大/缩小，中文下视觉接近两字符宽度
• 2ch：语义更准（1ch ≈ 字符 “0” 宽度），但 IE 不支持，且多数中文字体里 1ch 远小于一个汉字
• 32px 或 20px：仅限字体大小绝对固定的静态页；系统缩放、DPI 变化时会失准
• 2%：按父容器宽度计算，和字体无关——窄屏下缩进可能只剩几像素，完全不够
• 2rem：若项目用 JS 动态改 html { font-size }（如夜间模式），缩进会意外跳变

别用负值或百分比兼容 IE8；它对 text-indent: -1em 和 text-indent: 5% 支持极不稳定，尤其配合 direction: rtl 时容易错位。

text-align 和 text-indent 能一起用吗

能，而且是标准组合，但有前提：

• text-align: justify 必须作用在块级元素（如 <p></p>）上，不能写在 <span></span> 或 <div> 上 <li> <code>text-indent 需显式声明，justify 不会自动带缩进
• 单行文本也能生效 text-indent，但 justify 无视觉表现（浏览器忽略）
• 若单元格里用了 text-align: center 或 right，text-indent 仍计算，但对齐方式会把文字拉回，结果“缩了又拉回”，看起来没动

调试技巧：临时给 <td> 加 <code>background: #ff0，观察文字是否真向右偏移；若背景框内文字居左顶边，说明 text-indent 没触发，该换 padding-left。

Flex/Grid 容器里缩进失效怎么办

这不是 bug，是格式化上下文变更的自然结果：

• 首选 padding-left: 2em：它不依赖“首行”语义，对 flex item / grid item 同样生效，视觉结果几乎一致
• 若必须保留 text-indent 语义（比如要兼容旧打印样式），给 <p></p> 显式加 display: block，并确保其 width 不是 auto（flex item 默认 width: auto 可能导致退化）
• 别在导航菜单、卡片标题这类本就不该有“段落缩进”语义的地方硬套 text-indent —— 那是间距问题，该用 margin-left 或 padding-left

真正麻烦的是混合场景：富文本编辑器导出的 HTML 同时含内联样式、<span style="text-indent: 2em"></span> 和外部 text-indent 规则，这时候缩进逻辑互相覆盖，上线前得用开发者工具逐层检查 computed styles。