text-indent无效的首要原因是作用于行内元素（如、），它仅对块级元素或display设为block/inline-block的元素生效；需检查元素类型、父容器布局及是否被其他样式覆盖。
text-indent 设置后没生效？检查是否用了行内元素
直接给 <span></span> 或 <a></a> 这类默认行内元素加 text-indent 是无效的，因为该属性只对块级容器（或设置为 display: block / display: table-cell 的元素）起作用。
常见错误现象：text-indent: 2em 写了但文字完全不缩进，甚至开发者工具里显示属性已生效，却没视觉变化。
- 确认目标元素是
<p></p>、<div>、<code><h3></h3>等天然块级元素 - 若必须用于行内元素（如
<span></span>），需显式设置display: inline-block或display: block - 避免在
<label></label>、<strong></strong>等语义化行内标签上直接用text-indent - 优先用
text-indent: 2em，而非固定像素（如32px），以保证缩进随字号缩放 - 不要用
rem，因为text-indent是相对于自身font-size计算的，rem反而会引入父级根字号干扰 - 如果必须像素精准（如设计稿严格要求 32px），可测出当前字体下“两个汉字”的实际宽度再设死值，但牺牲响应性
- 若必须兼顾两端对齐与首行缩进，可用伪元素替代：
p::first-line { text-indent: 2em; }不起作用，但p::before { content: " "; }（插入两个全角空格）更可靠 - 更现代的解法是用
margin-left配合display: inline-block包裹首行文字，但会破坏流式布局 - 简单场景下，直接放弃
justify，改用text-align: left—— 对中文阅读体验影响远小于缩进丢失 - 确保文本容器本身有明确的
line-height和足够高度，避免基线错位掩盖缩进 - 不要把
text-indent和padding-left混用——后者会撑开容器，前者只移动文字位置 - 调试时可在容器上临时加
outline: 1px solid red，确认缩进区域是否被父布局裁剪
用 em 还是 rem？两个字符到底对应多少像素
中文排版常说“首行缩进两个汉字”，但 CSS 中没有“汉字单位”，2em 是最稳妥的近似值——它等于当前元素 font-size 的两倍，而中文字体在常规字号下，一个汉字宽度约等于 1em。
注意：这个换算不是绝对精确，尤其在等宽字体（如 monospace）或特殊字体（如思源黑体、PingFang SC）下，字宽可能略大于或小于 1em。
立即学习“前端免费学习笔记（深入）”；
遇到 text-align: justify 时缩进消失？这是浏览器默认行为
当同时设置 text-indent 和 text-align: justify 时，部分浏览器（尤其是旧版 Safari 和某些 Android WebView）会忽略首行缩进，因为两端对齐算法优先处理整行间隙分配。
这不是 bug，而是规范允许的渲染差异。CSS Text Level 4 明确说明：text-indent 在 justified 文本中“may be ignored”。
flex 或 grid 容器里的文本为何缩进失效
当文本所在元素是 display: flex 或 display: grid 的子项时，text-indent 仍有效，但容易被父容器的对齐方式覆盖或视觉遮蔽。
典型问题：父容器设了 align-items: center，子 <p></p> 虽有 text-indent，但因高度被拉伸、行高塌陷，导致缩进不可见。
text-indent: 2em 这一行代码本身几乎不会出错；真正卡住人的，往往是元素显示类型、字体度量差异、父级布局约束这些隐性条件。
