text-indent仅对块级元素生效，内联元素需设display:block；推荐用2em实现响应式首行缩进，避免px硬编码；调试时需排查white-space、direction及overflow冲突。
text-indent 只作用于块级元素，内联元素加了也没用
直接给 <span></span> 或 <a></a> 设置 text-indent 不会生效，因为该属性只对生成块级框的元素起作用。浏览器默认把 <p></p>、<div>、<code><h1>~<h6></h6>
</h1> 这类元素当作块级容器处理，首行缩进才可能被渲染。
常见误操作是给段落里的某个词单独加 text-indent，结果发现没反应——不是写错了，是元素类型不匹配。
- 若需对某段文字局部缩进，可包裹一层
<div> 或设 <code>display: block - 表格单元格（
<td>）默认是块级上下文，<code>text-indent可用，但要注意text-align可能覆盖效果 - Flex 容器子项即使设了
display: block，text-indent仍可能被主轴对齐干扰，建议优先用padding-left替代 - 避免写死
text-indent: 32px—— 用户调整系统字号或开启“更大文本”辅助功能时，缩进会僵硬不变 - 若需精确控制（如匹配印刷规范），可用
ch单位：text-indent: 2ch表示两个“0”字符宽度，对等宽字体更稳 - 注意：某些旧版 Safari 对
ch支持不全，生产环境建议降级为em - 调试时临时加
outline: 1px solid red到目标元素，确认缩进区域是否被隐藏或挤压 - 若用 CSS 预处理器（如 Sass），注意不要在嵌套规则里意外覆盖了
white-space - RTL 场景下需配合
text-align: start或显式使用text-indent: -2em反向调整 - 正文推荐范围：1.5em ~ 2em；标题或引文可放宽至 2.5em，但不宜再大
- 如果用了 variable font，
text-indent不会随字重/字宽轴变化，缩进量固定，需手动测试不同轴值下的视觉平衡 - 打印样式表（@media print）中，建议统一用
text-indent: 2em并禁用text-align: justify，避免两端对齐拉伸导致缩进错位
用 em 还是 rem？中文排版建议用 em
中文出版物习惯以“两个汉字宽度”为标准首行缩进，而一个汉字在多数中文字体中约等于 1em（相对于当前字体大小）。用 text-indent: 2em 比 20px 更可靠：字体放大时缩进同步变大，适配响应式场景。
rem 虽然也相对，但它基于根元素字体大小，容易在嵌套多层或动态改 html 字号时失准；em 是就近继承，更贴合段落自身字号语义。
遇到 text-indent 失效？先检查 white-space 和 direction
这两个 CSS 属性常和 text-indent 冲突。比如设了 white-space: nowrap，整段文字被压成一行，首行缩进就“没地方发挥”；又或者 direction: rtl（从右向左）时，text-indent 实际缩进的是逻辑首行，视觉上可能出现在右侧。
更隐蔽的问题是父容器设置了 overflow: hidden 且内容未换行，缩进部分被直接裁掉，看上去像没生效。
兼容性没问题，但要注意 line-height 和 font-size 变化带来的视觉误差
text-indent 本身 IE8+ 全支持，真正影响观感的是它和行高、字体大小的协同关系。比如 font-size: 14px + line-height: 1.6 下，缩进 2em 看起来比 font-size: 16px + line-height: 1.4 更“松散”，实际像素值一样，但人眼感知不同。
尤其在移动端小屏上，过大的 text-indent（如 3em）会让首行缩进显得突兀，破坏段落呼吸感。
缩进不是越明显越好，关键在建立视觉节奏。很多人调完 text-indent 就收工，却忘了检查相邻段落间距（margin-bottom）是否与之协调——缩进太深而段距太小，反而让文本块黏连在一起。
