text-indent仅对块级元素生效，p标签默认满足条件；推荐使用2em单位实现响应式首行缩进，避免px等固定单位；失效常见原因包括元素非块级、white-space干扰、空白符前置及css优先级覆盖。
text-indent 只对块级元素生效，p 标签默认满足条件
text-indent 作用对象必须是块级（或设置为 display: block）且有明确行盒（line box）的元素。p 标签天然符合——它既是块级元素，又会生成独立的行盒，所以直接在 p 上设 text-indent 就能缩进首行。
注意：如果给 p 设置了 display: inline 或 display: flex，text-indent 会失效；用 inline-block 也不行，因为此时它不再生成行盒上下文。
缩进值推荐用 em，避免像素硬编码
中文排版习惯是“两个汉字宽度”，用 2em 最稳妥——它会随父元素字体大小自动缩放，适配响应式场景。
常见错误包括：
- 写成
text-indent: 32px：字号变大时缩进显得过小，字号变小时又撑破容器 - 写成
text-indent: 2ch：虽然ch理论上是“0”的宽度，但中文字体下不可靠，部分浏览器渲染不一致 - 漏掉单位（如
text-indent: 2）：CSS 会直接忽略该声明
遇到首行没缩进？先检查这些地方
缩进失效往往不是 text-indent 本身的问题，而是布局干扰：
-
p外层被设置了white-space: nowrap或white-space: pre：强制单行或保留原始空格，破坏换行与首行概念 -
p内部第一字符是text-indent - 用了
margin-left模拟缩进：这会整体平移整个段落，不是首行缩进，且影响行高对齐 - CSS 优先级被覆盖：比如某处写了
p { text-indent: 0 }且权重更高，得用更具体的选择器覆盖
需要兼容 IE8？别用负值或百分比做 text-indent
IE8 支持 text-indent，但对负值缩进（如 -1em）和百分比值（如 5%）支持不稳定，尤其配合 direction: rtl 时容易错位。
稳妥做法：
- 只用正向长度单位：
em、rem、px（仅当固定字号场景） - 避免
text-indent与direction/unicode-bidi混用 - 若真需悬挂缩进（如古籍排版），不要依赖
text-indent，改用::first-line+padding-left配合负margin手动模拟
真正难处理的是混排场景：一段里既有中文又有英文、数字、Emoji，text-indent: 2em 看似简单，但字体度量差异会让“两个汉字宽度”在不同字体下实际像素并不一致——这时候缩进只是视觉近似，别强求像素级对齐。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
