text-indent是唯一语义正确的首行缩进手段，但仅对块级元素生效；失效主因包括元素非块级、父容器为flex/grid、white-space限制、高优先级样式覆盖、direction: rtl翻转及table-cell渲染特殊性。
text-indent 是唯一语义正确、浏览器原生支持的首行缩进手段，直接写 text-indent: 2em 即可生效——但前提是元素是块级、没被布局干扰、也没被更高优先级样式覆盖。
为什么 text-indent 加了却没效果
不是 CSS 写错了，而是渲染条件不满足：
-
<p></p>被意外设为display: inline或inline-block—— 浏览器不识别“首行”概念 - 父容器用了
display: flex或display: grid，<p></p>的块级盒行为被覆盖（此时text-indent失效） - 段落开头是
<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-indent: 0 全局覆盖容易漏掉或冲突，稳妥做法是主动排除：
-
p:first-of-type { text-indent: 0; }：适合结构固定、首段总在最前的页面（如博客正文） -
.post-content > p:nth-of-type(1) { text-indent: 0; margin-top: 0; }：更精准，避免误伤嵌套<p></p> - 若首段含
<figure></figure>或<blockquote></blockquote>，需额外加:not(:has(figure, blockquote))（现代浏览器支持）
注意：p:first-of-type 在 <header></header> 或 <aside></aside> 里也会匹配，若页面结构复杂，建议用类名控制更可靠。
Flex/Grid 容器里 text-indent 失效怎么办
这不是 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
真正容易被忽略的是：当 <p></p> 套在 display: flex 的 <article></article> 里时，即使显式设了 display: block，若没设 width: 100% 或 flex: 1，缩进仍可能不渲染——因为它的内容宽度未被约束，浏览器无法确定“首行”的基准线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
