text-indent只作用于块级元素，对等行内元素无效；需改用display:inline-block或包裹于中，推荐text-indent:2em实现中文首行缩进。
text-indent 只作用于块级元素的首行
直接给 <span></span> 或 <a></a> 这类行内元素加 text-indent 是无效的——它只对生成块级盒（block box）的元素起作用，比如 <p></p>、<div>、<code><li>，或者显式设了 display: block / display: table-cell 的元素。
常见误操作是给 <span class="intro"></span> 加缩进，结果没反应。这时候要么换用 <p></p>，要么加 display: inline-block（但注意这会改变布局行为）。
单位选 em 还是 rem 或 px？
中文排版习惯首行缩进两个汉字宽度，而一个汉字在多数中文字体中约等于 1em，所以 text-indent: 2em 是最常用也最稳妥的选择。
px 值固定，不随字号变化，缩进可能在响应式场景下显得过小或过大；rem 依赖根字体大小，若项目根字号动态调整（如根据屏幕缩放），缩进也会跟着变，反而偏离排版意图。
无序列表说明常见写法：
-
text-indent: 2em—— 推荐，语义清晰，适配字体缩放 -
text-indent: 32px—— 仅当明确需要像素级控制且字体大小固定时使用 -
text-indent: -9999px—— 旧式“隐藏文字”技巧，和缩进无关，别混淆
遇到 text-indent 失效的三个典型原因
不是属性写错了，而是被其他样式或结构干扰了：
- 父容器设置了
white-space: nowrap或white-space: pre，强制禁止单词换行，导致“首行”概念失效 - 段落里第一个字符是
<img>、<svg></svg>或<inline-flex></inline-flex>元素，浏览器可能把该元素当作“首行内容”，缩进应用在它前面（视觉上看不到） - CSS 优先级被覆盖，比如某处写了
p { text-indent: 0 }且规则权重更高，检查 computed styles 能快速定位
兼容性与特殊行为注意点
text-indent 在所有现代浏览器中完全支持，包括 IE8+。但有两个容易忽略的细节：
- 负值合法（如
text-indent: -1em），会把首行向左拉出容器，常用于悬挂缩进或文本截断效果，但要小心溢出被裁剪 - 在
<textarea></textarea>或contenteditable区域里，text-indent不生效——这类元素的换行和缩进由用户输入行为控制，CSS 无法干预 - Flex 容器中的子项如果设了
display: block，text-indent仍有效；但若子项是display: flex自身，则它内部的文本需再套一层块级元素才能缩进
真正要注意的是：缩进不是靠空格实现的，所以别在 HTML 里手动敲两个全角空格来“模拟”。那样既难维护，又破坏语义，还可能在不同字体/编码下错位。
