text-indent是唯一语义正确、原生支持首行缩进的手段，但仅对块级元素生效，常见失效原因包括元素非块级、父容器为flex/grid、首行含内联替换元素、高权重样式覆盖，推荐用2em单位并配合开发者工具验证computed值。
text-indent 是唯一语义正确、浏览器原生支持的首行缩进手段，但它不是“写了就生效”的万能开关——它只在块级上下文中起作用，且极易被布局、单位、继承关系干扰。
为什么 text-indent 加了却没效果
不是 CSS 写错了，而是渲染条件没满足：
-
<p></p>被设成了display: inline或inline-block—— 浏览器根本不识别“首行”概念 - 父容器用了
display: flex或display: grid，且没触发 BFC，<p></p>的块级盒行为被覆盖 - 段落开头嵌了
<img>、<svg></svg>或display: inline-flex元素，缩进发生在该元素左侧，视觉上等于没动 - 某处更高权重样式写了
p { text-indent: 0 }（比如富文本编辑器输出的内联style），直接覆盖你的设置
用开发者工具看目标元素的 Computed → display 值是否为 block，再点开 Computed → text-indent 确认最终值——这是最快定位原因的方式。
text-indent 该用什么单位
单位选错，缩进就“看起来不对”：
-
2em：最推荐。1em ≈ 当前font-size，2em 在多数中文字体下接近两个汉字宽度，且随字号缩放，适配响应式和系统字体放大 -
2ch：更贴近“字符宽度”语义（1ch ≈ 字符 “0” 的宽度），中文下近似一个汉字，但 IE 不支持，且依赖字体对ch的实现 -
32px：仅当字体大小绝对固定（如 Canvas 文本、印刷级静态页）时可用；系统缩放或无障碍设置会破坏它 -
2%：按父容器宽度计算，和字体无关——width: 1000px时缩进 20px，width: 400px时只剩 8px，极易失准
别混用 rem：如果项目用 JS 动态改 html { font-size }（比如根据屏幕宽度调整），2rem 缩进会跟着漂移，反而破坏段首对齐节奏。
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
注意：padding-left 和 text-indent 效果本质不同：padding-left 是整段右移，text-indent 仅第一行右移、其余行左对齐——选错会导致排版错乱。
容易被忽略的继承与边界行为
text-indent 有继承性，但实际使用中常因叠加或方向冲突出问题：
- 父元素设了
text-indent: 2em，子<p></p>也会缩进——若不想继承，得显式写text-indent: 0 - 遇到
white-space: pre或pre-wrap，缩进可能出现在第二行而非首行，因为换行逻辑被覆盖 - 设了
direction: rtl，text-indent默认向右缩进（符合 RTL 习惯），但若同时用了text-align: left，视觉会混乱 -
text-indent: -1em合法，但若没配padding-left，文字可能被裁剪——尤其在overflow: hidden容器里
真正关键的是：缩进发生在内容盒（content box）内，不包含 padding 区域。如果你希望文字离边框也有空隙，得额外加 padding-left，而不是指望 text-indent 把它一起扛下来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
