text-indent生效但视觉无缩进，主因是元素非块级、父容器为flex/grid、首行含内联替换元素、高权重样式覆盖或与margin/padding混用导致偏移错位。
text-indent 生效但段落看起来“没缩进”，大概率不是 CSS 写错了，而是样式被覆盖、渲染条件不满足，或和 margin/padding 混用导致视觉错位。
为什么 text-indent 设置了却没效果
它只对块级元素起作用，且依赖格式化上下文稳定：
-
display不是block（比如被设成inline或inline-block）→ 浏览器压根不识别“首行”概念 - 父容器用了
display: flex或display: grid，且没触发 BFC →<p></p>的块级盒行为被降级 - 段落开头嵌了
<img>、<svg></svg>或vertical-align: middle的内联元素 → 缩进发生在该元素左侧，视觉上等于没动 - 富文本编辑器输出的
p[style]带了内联text-indent: 0→ 权重高于你的外部样式，必须用p[style] { text-indent: 2em !important; }强制覆盖
最快验证方式：打开开发者工具，选中目标 <p></p>，看 Computed 面板里的 display 是否为 block，再点开 text-indent 确认最终值。
text-indent 和 margin-left / padding-left 混用会出什么问题
三者语义与作用域完全不同，混用等于主动制造冲突：
-
text-indent只推首行文字，不影响段落整体位置，也不破坏text-align: justify对齐 -
margin-left或padding-left是整段左移 → 文字右边界可能超出容器，小屏下溢出；justify失效；若父容器有border或padding，还会叠加偏移 - 当段落内含
display: inline-flex子元素（如图标按钮），margin-left可能意外触发新 BFC，让text-indent完全不生效
结论：首行缩进只用 text-indent，段间距只用 margin，段内留白才考虑 padding——职责必须解耦。
响应式场景下缩进单位怎么选才不翻车
单位选错，缩进在不同设备上就会“漂移”或“消失”：
- 用
2em：最稳。1em = 当前font-size，字号放大时缩进同步变宽，适配系统缩放和无障碍设置 - 别用
px（如32px）：固定死宽度，用户 zoom 页面或开启“更大字体”时，缩进会显得极小甚至看不见 - 避开
%：按父容器宽度算，窄屏下（比如 320px）2% 仅 6.4px，远不够两个汉字宽度 - 慎用
rem：若项目通过 JS 动态改html { font-size }（如夜间模式切换），缩进会跟着跳变，破坏阅读节奏
第一段通常不该缩进：p:first-of-type { text-indent: 0; margin-top: 0; } 必须写，否则标题后紧跟的段落会多出一格缩进，视觉突兀。
真正难的不是加一行 text-indent: 2em，而是确保它在富文本输入、flex 布局、动态字号、不同屏幕宽度下始终稳定生效——漏掉 p:first-of-type 重置、忽略内联样式覆盖、或者用 padding-left 替代 text-indent，任一环节出错，缩进就变成“玄学”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
