text-indent仅对块级元素生效，行内元素需设display:block；flex/grid容器中可能失效，建议用padding-left替代；2em不等于两汉字宽，推荐ch单位或rem以提升一致性。
text-indent 只对块级元素生效
直接给 <span></span> 或 <a></a> 这类行内元素加 text-indent，缩进不会出现——浏览器根本不认。它只作用于生成块级盒（block box）的元素，比如 <p></p>、<div>、<code><h3></h3>，或者显式设了 display: block / display: table-cell 的元素。
常见错误现象：<p><span style="text-indent: 2em">段落开头</span></p> → 没缩进；正确做法是把 text-indent 放在 <p></p> 上。
- 使用场景：中文段落首行空两字符、引用块左缩进、列表项文字对齐等
- 注意
text-indent会继承，父元素设了，子块级元素也会受影响，必要时用text-indent: 0重置 - 值支持
em（推荐，相对字体大小）、rem、px，但避免用%—— 它相对的是容器宽度，不是字体大小，极易出错
flex 或 grid 容器里的 text-indent 失效
当父容器是 display: flex 或 display: grid 时，其直接子元素即使本身是 <p></p>，text-indent 也可能不生效。因为 flex/grid 会触发新的格式化上下文，块级盒行为被覆盖。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 优先改用
padding-left模拟缩进（例如padding-left: 2em），更可控 - 若必须用
text-indent，可给子元素额外加display: block并确保它没被 flex item 的对齐属性（如align-self）干扰 - 别依赖
text-indent在卡片布局、导航菜单文字上做“视觉缩进”，那本质是间距问题，该用margin或padding
中文排版下 2em ≠ 两个汉字宽度
text-indent: 2em 看起来像缩进两个字，但实际取决于当前字体的 font-size 和字宽表现。等宽字体（如 monospace）下接近，但多数中文字体（如 SimSun、Microsoft YaHei）的汉字是全角，而 em 是相对于 font-size 的水平度量，不严格等于字符宽度。
容易踩的坑：
- 用
text-indent: 2ch更贴近“两个字符”预期，但ch单位取的是 “0” 字符宽度，中文下仍不准 - 移动端 viewport 缩放或系统字体放大后，
em缩进会同比放大，可能撑破容器——建议配合max-width或用视口单位（如text-indent: 1.6rem）增强一致性 - 遇到 PDF 导出或打印样式，
text-indent表现可能和屏幕不一致，务必实测
line-height 影响缩进后的行高对齐
text-indent 只移动第一行文字起始位置，不影响行高计算。但如果 line-height 值较小（比如 line-height: 1），缩进后的首行文字可能和第二行文字视觉粘连，尤其在字号较大时。
实操建议：
- 中文正文推荐
line-height: 1.6 ~ 1.8，能自然拉开行距，让缩进效果清晰可见 - 避免同时设置
text-indent和line-height: 1，除非明确需要紧凑排版（如表格内说明文字） - 如果缩进后首行文字看起来“下沉”，检查是否父元素有
vertical-align或transform干扰了基线
真正麻烦的不是怎么写这行 CSS，而是缩进到底该由谁负责：是语义结构（比如用 <blockquote></blockquote> 自带样式），还是纯视觉（text-indent），还是布局工具（padding）。选错一层，后面所有适配都跟着偏。
