text-indent仅对块级容器生效，常见失效因父元素为inline、flex或grid布局；中文推荐用2em，避免rem和margin/padding混用；ie8不支持负值且rtl下行为特殊。
text-indent 的基本用法和常见失效场景
直接写 text-indent: 2em 多数时候能生效，但经常遇到“缩进没反应”——大概率是元素不是块级或内联元素被包裹在 display: inline 容器里。text-indent 只对**块级容器（display: block、display: table-cell 等）生效**，对 span、a 这类默认 inline 元素无效。
常见踩坑点：
- 给
p标签加了text-indent却套在div style="display: inline"里，父容器压制了块行为 - 用了
display: flex或display: grid的父容器，子p虽是块级，但主轴排列下text-indent仍可能被忽略（尤其设了align-items: flex-start时） - 中文段落缩进常误用
px，导致不同字号下缩进比例失调；em是更稳妥的选择，1em = 当前字体大小
em 单位怎么算才真正“缩进两字”
em 基于当前元素的 font-size 计算，所以缩进是否“看起来像两个汉字”，取决于字体本身。中文字体（如 SimSun、Microsoft YaHei）通常一个汉字宽度 ≈ 1em，但等宽字体（monospace）或某些无衬线字体（Helvetica）下，汉字可能略宽于 1em。
实操建议：
- 中文排版推荐
text-indent: 2em，兼容性好，浏览器解析稳定 - 若字体特别窄（如小字号 +
font-family: "Helvetica Neue"），可试2.2em补偿视觉差 - 避免混用
rem：它基于根字体大小，一旦页面缩放或用户修改了html的font-size，段落缩进会失准
与 margin/padding 混用时的冲突表现
text-indent 只缩进**第一行文字内容**，不影响整个盒子位置；而 margin-left 或 padding-left 会移动整块内容或背景。两者叠加容易造成“缩进过大”或“背景错位”。
典型错误现象：
- 设置了
text-indent: 2em和padding-left: 1em，结果首行缩进变成 3em（文字相对左边缘），但背景从 1em 处开始，视觉上文字“飘出”背景 - 用
margin-left替代text-indent实现缩进，会导致整段上移/下移（影响行高对齐），且无法实现“仅首行缩进” - 配合
border-left使用时，text-indent不影响边框位置，但padding-left会让文字远离边框——该用哪个，取决于你到底想“推文字”还是“推容器”
IE8 及更老浏览器里的兼容细节
IE8 支持 text-indent，但有两点必须注意：
- 不支持负值缩进（
text-indent: -1em在 IE8 下会被忽略），如果要做“悬挂缩进”，得用margin-left配合position: relative模拟 - 当父元素设了
direction: rtl（右向左），text-indent会向右缩进，而非常规的左缩进——这点在多语言站点中容易被忽略 - 所有现代浏览器（Chrome/Firefox/Safari/Edge）对
text-indent+em的解析一致，无需额外 hack
真正麻烦的不是单位，而是忘记检查元素是否具备块级上下文——缩进失效，八成问题不在 text-indent 本身，而在它的“容器资格”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
