text-indent仅对块级元素生效，常见失效原因包括作用于行内元素、父容器使用flex/grid布局、white-space属性干扰、高权重样式覆盖及富文本内联样式冲突。
直接用 text-indent 就行，但必须作用在块级元素上，且不能指望它在所有布局上下文中都“看得见”。
为什么 text-indent 加在 <p></p> 上却没效果
最常见的情况是：你写了 p { text-indent: 2em; }，但页面里某些段落就是不缩进。这不是 CSS 写错了，而是结构或样式干扰了“首行”的生成逻辑：
- 父容器用了
white-space: nowrap或white-space: pre，整段被压成单行，“首行”概念失效 -
<p></p>开头嵌了<img>、<svg></svg>或display: inline-flex元素，浏览器把那个内联内容当作了“首行起始”，缩进发生在它左边——视觉上等于没动 - 某处更高权重的规则写了
p { text-indent: 0 }（比如重置样式表或富文本编辑器输出的内联 style），覆盖了你的设置；打开开发者工具看Computed面板能立刻确认
text-indent: 2em 是中文排版的默认选择，但不是万能解
它之所以被广泛采用，是因为 1em ≈ 当前字体大小，2em 在多数中文字体下接近两个汉字宽度，且随字号缩放——响应式友好。但它也有边界：
-
%单位慎用：text-indent: 2%是按父容器宽度算的，和字体完全无关，极易缩得过大或过小 -
px固定值（如32px）只适合字体大小绝对固定的场景，系统放大字体或移动端缩放时会失准 -
rem看似稳定，但如果根字体（html { font-size }）动态变化（比如根据屏幕宽度 JS 调整），缩进也会跟着漂移，反而偏离排版意图 - 真正想“缩进两个字符”，
ch单位更贴近语义（text-indent: 2ch），但它以 “0” 字符宽度为基准，中文下仍不精确，且 IE 不支持
Flex/Grid 容器里 text-indent 失效怎么办
当 <p></p> 是 display: flex 或 display: grid 的直接子项时，它的块级盒行为可能被格式化上下文覆盖，text-indent 常常静默失效。
- 首选替代方案是改用
padding-left: 2em—— 它不依赖“首行”语义，对 flex item / grid item 同样生效，且视觉结果几乎一致 - 如果非要用
text-indent，可尝试给<p></p>显式加display: block，并检查是否被align-self或justify-content拉偏了位置 - 别在导航菜单、卡片标题这类本就不该有“段落缩进”语义的地方硬套
text-indent；那是间距问题，该用margin-left或padding-left
容易被忽略的兼容性与行为细节
text-indent 在 IE8+、Chrome、Firefox、Safari 中完全支持，但有几点实操中常踩坑：
- 负值合法（
text-indent: -1em），但若没配合padding-left，文字可能直接被容器左边缘裁掉 -
<textarea></textarea>和contenteditable区域里，text-indent无效——它们的换行和缩进由用户输入控制，CSS 插不上手 - 在
direction: rtl（如阿拉伯语）下，text-indent向右缩进；writing-mode: vertical-rl下，它沿垂直方向生效（即“首块”向上偏移） - 别在 HTML 里手动敲两个全角空格来模拟缩进：破坏语义、影响 SEO、复制粘贴错乱、屏幕阅读器误读
真正要注意的是：缩进是视觉排版指令，不是内容结构。只要块级容器存在、首行文本能被浏览器识别为“第一行内容”，text-indent 就能工作；一旦布局模型或内容结构模糊了这个前提，就得换思路——不是属性不行，是它没被正确调用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
