text-indent仅对块级元素生效，需作用于等容器而非；2字符缩进推荐用2ch（ie9–11不支持则回退2em）；换行后仅首行缩进属正常行为，flex/grid内需额外处理。
直接用 text-indent 就行，但浏览器默认会把缩进作用在块级元素上，<span></span> 或内联文本不生效是常见误解。
text-indent 只对块级容器起作用
它不是给“文字”加缩进，而是给“包含文字的块”加缩进。如果直接写在 <span></span> 或 <a></a> 上，基本没反应。
-
text-indent必须应用在<p></p>、<div>、<code><h3></h3>这类块级元素上 - 若内容在外层是
<div>，但内部全是 <code><span></span>，缩进依然有效——因为作用对象是<div> <li>想让一段纯内联 HTML（如 <code><span>第一行文字</span><span>第二行</span>）首行缩进？得先包一层<p></p>或设display: block - 用
2em最常用：1em ≈ 当前字体大小，对等宽字体或标准中文字体较接近 2 字符宽度 - 用
2ch更准：1ch = 数字 "0" 的宽度，多数中文字体下 1ch ≈ 1 个汉字宽度，所以text-indent: 2ch是更靠谱的选择 - 避免用
px：字号缩放、用户设置、高 DPI 屏幕下会失准 - 注意：
ch在 IE9–IE11 不支持，如需兼容旧浏览器，退回到2em并测试实际渲染 - 如果希望每段都缩进（比如古籍排版），确保每段都是独立
<p></p>，而不是用<br>换行 - 如果内容含强制不换行的
white-space: nowrap，text-indent仍只作用于第一行，但整段可能溢出容器，看起来像“没缩进” - 遇到
display: flex或display: grid容器内的文本，text-indent默认失效——因为 flex/grid 项不是常规流内块，得额外设align-self: flex-start或改用padding-left
2字符缩进 ≠ 2em 或 2px
中文排版里“2字符”是视觉单位，CSS 没有原生支持，得靠估算或字体度量。
遇到换行/断词导致缩进错位
当一行文字被自动换行（比如长英文单词、URL、无空格中文段落），text-indent 只影响第一行开头，后续行顶格——这本来就是正确行为。但有人误以为“缩进没生效”，其实是预期错了。
立即学习“前端免费学习笔记（深入）”；
真正容易被忽略的是：某些 CSS 重置库（如 normalize.css）或框架（如 Bootstrap）会把 p 的 text-indent 设为 0，或者全局清掉所有缩进。检查 computed styles 时，别只看自己的样式表，得往上翻继承链。
