text-indent生效需满足块级上下文等前提，常见失效原因包括元素非block、父容器为flex/grid、首行含内联替换元素、white-space异常或样式被覆盖；推荐用2em单位，兼顾响应性与兼容性。
text-indent 是唯一语义正确、浏览器原生支持的首行缩进手段，但直接写 text-indent: 2em 不代表一定生效——多数失效不是代码错，而是渲染上下文不满足。
为什么加了 text-indent 却没缩进
常见现象：CSS 写对了，开发者工具里也看到声明存在，但页面上第一行纹丝不动。
-
<p></p>被设成display: inline或inline-block—— 浏览器压根不识别“首行”概念 - 父容器用了
display: flex或display: grid，<p></p>的块级盒行为被覆盖，text-indent失效 - 段落开头是
<img alt="如何规范HTML页面中的段落缩进设置" >、<svg></svg>或其他内联替换元素，缩进发生在该元素左侧，视觉上等于没动 - 富文本编辑器输出的内联样式写了
style="text-indent: 0"，高权重直接覆盖你的规则 -
white-space: nowrap或white-space: pre破坏换行逻辑，“首行”失去意义
最快验证方式：打开开发者工具 → 查看目标 <p></p> 的 Computed 标签页 → 确认 display 是 block，且 text-indent 的最终计算值不是 0。
text-indent 该用什么单位才靠谱
单位选错，缩进就“看起来不对”，尤其在系统字体放大、响应式断点切换或夜间模式下。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
-
2em：最稳妥。1em ≈ 当前font-size，缩进随字号同步变化，中文下视觉接近两字符宽度 -
2ch：语义更准（1ch ≈ 字符"0"宽度），但 IE 不支持，且多数中文字体里 1ch 远小于一个汉字 -
32px或20px：仅限字体大小绝对固定的静态页；系统缩放、DPI 变化时会失准 -
2%：按父容器宽度计算，和字体无关——窄屏下缩进可能只剩几像素，完全不够 -
2rem：若项目用 JS 动态改html { font-size }（如夜间模式），缩进会意外跳变
别用负值或百分比兼容 IE8；它对 text-indent: -1em 和 text-indent: 5% 支持极不稳定，尤其配合 direction: rtl 时容易错位。
Flex/Grid 容器里 text-indent 失效怎么办
这不是 bug，是格式化上下文变更的自然结果。
- 首选
padding-left: 2em：它不依赖“首行”语义，对 flex item / grid item 同样生效，视觉结果几乎一致 - 若必须保留
text-indent语义（比如要兼容旧打印样式），给<p></p>显式加display: block，并确保其width不是auto（flex item 默认width: auto可能导致退化） - 别在导航菜单、卡片标题这类本就不该有“段落”语义的元素上硬套
text-indent
真正麻烦的不是写几行 CSS，而是缩进和间距的组合效果在不同字号、不同设备、不同富文本来源下是否稳定——text-indent 和 margin 必须解耦定义，且第一段、引用段、标题后段要单独排除，这些细节漏掉一个，上线后就只能靠肉眼调。
