text-indent加了没效果，根本原因是浏览器未识别“首行”：display非block/table-cell、父容器为flex/grid、首行含内联替换元素、高权重样式覆盖或white-space破坏换行；验证需查computed中display值和text-indent最终计算值。
text-indent 加了却没缩进，不是代码写错了，而是浏览器压根没按你的预期渲染——得查它“认不认首行”。
为什么开发者工具里看到 text-indent 值是对的，但页面没效果
Computed 标签页显示 text-indent: 2em ≠ 实际生效。常见卡点：
-
display不是block、table-cell或list-item—— 比如被设成inline或inline-flex，首行概念直接失效 - 父容器用了
display: flex或display: grid，子p的块级格式化上下文被覆盖，text-indent失去作用对象 - 段落开头是
<img>、<svg></svg>或<input>这类内联替换元素，缩进发生在该元素左侧，视觉上等于没动 - 某处写了
p { text-indent: 0 !important }（富文本编辑器输出常见），高权重覆盖无法绕过 -
white-space: nowrap或white-space: pre破坏了换行逻辑，“首行”失去定义基础
最快验证：右键目标 p → “检查”，在 Computed 面板确认 display 是 block，且 text-indent 最终值非零、非 inherit。
用 border 和 background 快速定位缩进是否触发
纯看文字偏移容易误判，加一层视觉锚点更可靠：
- 临时加
style="text-indent: 2em; border: 1px solid #f00;"：若边框完整包裹段落，且第一行明显右移、其余行左对齐，说明text-indent已生效 - 对
<td> 或 <code><th> 调试时，加 <code>background: #ff0：观察文字是否真向右偏移；若文字始终顶左上角，说明缩进未触发，该换padding-left - 在 flex 容器中调试
p：加width: 100%后再试text-indent，避免flex item默认width: auto导致退化 -
2%：按父容器宽度算，320px 屏下仅 6.4px，远不够两字符；窄屏可能缩到看不见 -
32px或20px：用户 zoom 页面或系统字体放大后，缩进比例严重失衡 -
2rem：若项目用 JS 动态改html { font-size }（如夜间模式），缩进会突兀跳变 -
-1em或5%：IE8 兼容极差，尤其配合direction: rtl时错位严重 - 用属性选择器强覆盖：
p[style] { text-indent: 2em !important; } - 若只针对特定来源，加 class 再强化：
.editor-content p { text-indent: 2em !important; } - 别指望
* { text-indent: 2em }：它会污染h1、li、button等所有块级元素，造成意外偏移
响应式缩进下哪些值会“悄悄失效”
缩进单位选错，小屏或系统缩放时就露馅：
真正稳定的只有 2em：它随当前 font-size 等比缩放，中文下视觉接近两字符宽度，且所有现代浏览器包括 IE9+ 都无歧义。
富文本插入的 p 标签怎么强制缩进
编辑器输出常带内联 style，比如 <p style="margin: 0; text-indent: 0"></p>，普通 CSS 选中器根本盖不过去：
最麻烦的不是写错样式，而是缩进和 line-height、margin、white-space 这几项组合后，在不同字号、不同设备、不同富文本来源下是否还稳定——漏掉一个条件，就可能整段排版崩掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
