text-indent 失效主因是元素非块级或父容器为 flex/grid；中文首行缩进推荐 text-indent: 2em；它仅推首行，padding-left 则整体偏移；子块级元素需显式设 text-indent: 0 重置。
text-indent 为什么没生效？常见失效场景
直接设了 text-indent 却看不到缩进，大概率是元素类型或盒模型不匹配。它只对块级容器（如 p、div、h3）里的**首行文本**起作用，对 span、a 这类行内元素默认无效；如果父元素设置了 display: flex 或 display: grid，子元素的首行概念就消失了，text-indent 也会被忽略。
- 确保目标元素是块级或显式声明
display: block - 避免在
flex/grid容器直系子元素上依赖text-indent - 检查是否被其他样式（如
white-space: nowrap）强制压成单行且溢出隐藏
中文段落首行缩进 2 字符的可靠写法
CSS 没有“字符单位”，所谓“两个汉字宽”得靠估算。用 em 最稳妥：1 个中文字符在多数字体下接近 1 em，所以 text-indent: 2em 是通用解法。别用 px（字号一变就错）、也别信 ch（中文支持差，Chrome 110+ 才稳定）。
-
text-indent: 2em—— 推荐，响应式友好，随字体大小自动缩放 -
text-indent: 32px—— 仅当字号固定且明确为 16px 时可用 - 避免
text-indent: 2ch—— Safari 和旧版 Edge 对中文ch计算不准
text-indent 和 padding-left 的区别在哪
两者都让文字看起来“往右移”，但机制完全不同：text-indent 只推首行，后续行左边界不变；padding-left 是整个盒模型向右撑开，所有行都跟着偏移。如果段落需要悬挂缩进、或要配合背景色/边框显示，用 padding-left 更可控；但纯首行缩进排版（如出版物风格），text-indent 语义更准确、兼容性更好。
- 需要首行缩进 + 其他行顶格 → 用
text-indent - 需要整段文字统一内边距 + 背景色对齐 → 用
padding-left - 同时用两者？小心叠加：比如
text-indent: 2em+padding-left: 1em，首行实际缩进是 3em，但第二行只有 1em 左侧空间
遇到 text-indent 被继承或意外影响子元素怎么办
text-indent 不会继承，但它作用的块级元素如果包含行内子元素（比如 span、strong），这些子元素的首行仍受父级控制——这是正常行为，不是 bug。真正的问题常出在：父元素设了 text-indent，结果子 div 里新段落也被缩进了。这是因为子 div 默认是块级，它的“首行”就是自身内容的第一行，而它又没重置 text-indent，于是沿用了父级值。
立即学习“前端免费学习笔记（深入）”；
- 子块级容器需要取消缩进 → 显式写
text-indent: 0 - 不想让子元素受父级影响 → 给子元素加
text-indent: inherit或initial（慎用，可能破坏设计意图） - 用 CSS 自定义属性做可配置缩进时，注意
text-indent: var(--indent, 0)比硬编码更易维护
真正容易被忽略的是行高和字体度量对视觉缩进的影响：同样 2em，在 line-height: 1.2 和 line-height: 2.5 下，首行下沉感不同，缩进的“重量感”也会变。调的时候最好在真实字号和行高下预览，别只看代码值。
