text-indent仅对块级元素生效，内联元素需设display为block或inline-block；推荐用em单位以适配字体大小；负值可实现悬挂缩进但需配合padding/margin防截断；失效常见原因包括white-space、flex/grid布局及CSS优先级冲突。
text-indent 只对块级元素生效，<p></p> 没问题但 <span></span> 不行
text-indent 作用对象必须是「生成块级盒」的元素。浏览器默认把 <p></p>、<div>、<code><h1>~<h6></h6>
</h1> 当作块级元素，所以直接写 text-indent: 2em; 就能缩进首行。
但 <span></span>、<a></a>、<strong></strong> 这类内联元素默认不响应 text-indent —— 即使加了样式也不会动。真要让它缩进，得先用 display: inline-block; 或 display: block; 改变盒模型类型，否则纯属白设。
常见错误现象：
写了一堆 text-indent: 2em; 在 <span class="note"></span> 上，预览完全没反应——八成就是卡在这儿。
用 em 而不是 px 才算真正适配字体大小
text-indent 的值推荐用 em 单位，因为它是相对于当前元素 font-size 计算的。比如 font-size: 16px; 时，text-indent: 2em; 就等于 32px；换成 font-size: 20px;，缩进自动变成 40px，视觉比例始终一致。
立即学习“前端免费学习笔记（深入）”；
用 px 看似精确，实际会破坏响应式排版：
• 移动端字号变小，text-indent: 32px; 就显得过大
• 用户调高系统字体，缩进却僵在原地，和正文脱节
• 多语言混排（如中英夹杂）时，不同字体的 x-height 差异会让 px 缩进看起来“偏上”或“偏下”
无序列表说明适配要点：
• 中文段落常用 text-indent: 2em;（约两个汉字宽度）
• 英文段落可酌情用 1.5em 或 2em，避免过宽挤压阅读节奏
• 配合 line-height 调整时，text-indent 不影响行高计算，无需额外补偿
负值 text-indent 能做悬挂缩进，但要注意截断风险
设成负值（如 text-indent: -1em;）会让首行向左突出，实现「悬挂缩进」效果，常用于参考文献、术语表等场景。但它本质是「把文字往左推」，如果父容器太窄或没留白边，文字会被直接裁掉。
关键预防措施：
• 必须配合 padding-left 或 margin-left 补出足够空间，例如：
blockquote {<br> text-indent: -1em;<br> padding-left: 1.5em;<br>}• 避免在
overflow: hidden; 容器里用负缩进，除非你确认内容不会溢出• Flex 或 Grid 布局中，负
text-indent 可能被容器对齐方式覆盖，优先检查父级 justify-content 和 align-items
遇到首行缩进失效，先查这三件事
不是所有“没缩进”都是样式写错了。实际调试时，高频干扰项就这几个：
• white-space: nowrap; 或 white-space: pre; 会禁用换行逻辑，导致「首行」概念消失，text-indent 自然无效
• 元素设置了 display: flex; 或 display: grid;，此时它已不按常规文本流渲染，text-indent 被忽略（哪怕里面包着 <p></p>）
• CSS 优先级冲突：比如某处写了 p { text-indent: 0; }，后面又没用更高权重覆盖，结果就是缩进被清零
最省事的验证法：临时加一句 outline: 1px solid red; 到目标元素，看盒子边界是否贴着左边——如果盒子本身就没占满父容器，那大概率是布局问题，不是 text-indent 的锅。
