text-indent是唯一语义正确、原生支持首行缩进的手段，但仅对块级元素生效，常见失效原因包括元素非块级、父容器为flex/grid、首行含内联替换元素、高权重样式覆盖或white-space干扰，推荐用2em单位并配合开发者工具验证computed值。
text-indent 是唯一正确设置首行缩进的方式，但必须用对地方、选对单位、避开布局陷阱。
为什么 text-indent 加了却没缩进
不是代码写错了，而是渲染条件没满足：
-
<p></p>被设成display: inline或inline-block—— 浏览器压根不识别“首行”概念 - 父容器用了
display: flex或display: grid，<p></p>的块级盒行为被覆盖 - 段落开头是
<img>、<svg></svg>或其他内联替换元素，缩进发生在该元素左侧，视觉上等于没动 - 某处高权重样式写了
p { text-indent: 0 !important }（常见于富文本编辑器输出） - 用了
white-space: nowrap或white-space: pre—— 破坏换行，“首行”失去意义
最快验证方式：打开开发者工具 → 查看目标 <p></p> 的 Computed 标签页 → 确认 display 是 block，且 text-indent 的最终值不是 0。
text-indent 该用什么单位才靠谱
单位选错，缩进就“看起来不对”，尤其在响应式或系统字体放大的场景下：
-
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>上 -
text-indent需显式声明，justify不会自动带缩进 - 单行文本也能生效
text-indent，但justify无视觉表现（浏览器忽略） - 若单元格里用了
text-align: center或right，text-indent仍计算，但对齐方式会把文字拉回，结果“缩了又拉回”，看起来没动
调试技巧：临时给 <td> 加 <code>background: #ff0，观察文字是否真向右偏移；若背景框内文字居左顶边，说明 text-indent 没触发，该换 padding-left。
Flex/Grid 容器里缩进失效怎么办
这不是 bug，是格式化上下文变更的自然结果。强行加 display: block 可能部分修复，但更推荐务实方案：
- 优先用
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
真正难处理的是混排场景：一段里既有中文又有英文、数字、Emoji。字体度量差异会让“两个汉字宽度”在不同字体下实际像素并不一致——这时候缩进只是视觉近似，别强求像素级对齐。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
