text-indent未生效主因是元素非块级、字体设置异常、浮动干扰或编辑器空格冲突；须检查display值、font-size上下文、清除浮动并清理冗余空白。
text-indent没生效？先确认元素是不是块级
直接写 text-indent: 2em 却没缩进，大概率是 被父容器“改了身份”。比如父元素用了 display: flex 或 display: grid，而子 没显式设 display: block，它就可能退化为 display: inline 或 inline-block —— 这两种都不响应 text-indent。
实操建议：
- 用浏览器开发者工具检查目标
的 Computed 标签页，看display值是不是block - 若父容器是
flex，给加display: block或align-self: flex-start并确保width不是auto - 避免在
、等默认行内元素上硬套text-indent，它不会生效
缩进看起来偏大或偏小？单位和字体上下文在捣鬼
text-indent: 2em 不等于“两个汉字”，而是当前 font-size 的两倍。如果父容器设了 font-size: 0（常见于清除 inline 元素间隙的 hack），那 2em = 0px，缩进就消失了；如果根元素 font-size: 20px，2rem 就是 40px，在中文字体下明显过宽。
实操建议：
- 中文段落优先用
2em，它随本段字号变化，比px更健壮 - 想更贴近汉字宽度，可试
text-indent: 2ch（前提是字体支持ch度量，多数系统中文字体 OK） - 别混用
rem和em：全局统一用em，避免嵌套时因根字号变化导致缩进错乱 - 加个临时
border: 1px solid red边框，能一眼看出缩进是否从容器左边缘起算
段落开头有图片或浮动内容？缩进位置可能被视觉遮挡
当段落前面有 float: left 的图片时，文字会绕排到右侧，但 text-indent 仍从整个容器的左边缘计算。结果就是：第一行被图片挡住一半，缩进“看不见”；第二行又紧贴图片右边缘，看起来像整段右移了。
实操建议：
- 不推荐靠调大
text-indent强行“躲开”图片——响应式下极易错位 - 给段落加
clear: both，让它从浮动元素下方开始渲染（可在上直接加，或在浮动容器后插一个） - 现代布局优先用 Flex 或 Grid 替代
float，从根本上避开绕排干扰 - 若必须保留浮动，且需精确控制首行起始点，可考虑给段落设
overflow: hidden触发 BFC，也能阻断绕排影响
移动端或编辑器里缩进忽有忽无？空格和样式冲突了
秀米、公众号编辑器等常默认插入全角空格或 当“缩进”，一旦再加 text-indent，就会叠加显示：视觉上缩进远超两字符。更麻烦的是，复制粘贴时这些空格可能丢失或转义异常，导致 IE/Chrome 渲染不一致（比如字体编码不是 UTF-8，宋体显示成乱码，空格宽度崩坏）。
实操建议：
- 编辑前先把段首所有空格、
- 禁用编辑器“自动添加空格”类功能，专注用 CSS 控制
- 检查 CSS 文件编码是否为 UTF-8，尤其含中文注释或字体名时，乱码会导致
font-family解析失败，间接影响em计算 - 不要依赖
或white-space: pre实现缩进——它们会锁死换行和空格，破坏响应式
真正难的不是写 text-indent: 2em，而是它生效的前提太“娇气”：块级上下文、干净的字体链、无浮动干扰、无冗余空白。每一步都得亲手验证，不能只信代码长得对。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
