text-indent 仅对块级元素首行生效，display 非 block、overflow 裁剪、内联替换元素开头、强制重置或 white-space 异常均会导致失效；单位推荐 2em，表格和 Flex 中应改用 padding-left 或显式设 display: block。
直接用 text-indent，别加空格、别套 padding-left，否则不是缩进，是偏移。
为什么 text-indent: 2em 有时完全没反应
不是代码写错了，而是浏览器压根没触发“首行”计算逻辑：
-
display不是block：比如<p></p>被设成display: inline或套在flex容器里且未显式声明display: block - 父容器有
overflow: hidden且缩进值过大，直接把首行裁掉（临时加padding-left: 1em就能验证） - 段落开头是
<img alt="在HTML中实现段落首行缩进的详细教程" >或<svg></svg>这类内联替换元素，text-indent作用在它左边，视觉上文字没动 - 某处写了
p { text-indent: 0 !important }（富文本编辑器导出 HTML 常见） - 用了
white-space: nowrap或pre，导致“首行”语义失效
最快确认方式：打开开发者工具 → 查看目标 <p></p> 的 Computed 标签页 → 检查 display 是否为 block，text-indent 最终值是否非零。
text-indent 该用 em、ch 还是 px
单位选错，缩进就“看起来不对”，尤其在响应式或系统字体放大的场景下：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
-
2em：最稳妥。1em = 当前元素的font-size，缩进随字号等比缩放，中文下视觉接近两字符宽度，所有现代浏览器包括 IE8+ 都支持 -
2ch：语义更准（1ch ≈ 字符 “0” 宽度），但 IE 不支持，且多数中文字体里 1ch 明显小于一个汉字，实测易偏窄 -
32px或20px：仅限字体大小绝对固定的静态页；系统缩放、DPI 变化时会失准 -
2rem：若项目用 JS 动态改html { font-size }（如夜间模式），缩进会意外跳变 - 避免
2%：按父容器宽度算，窄屏下缩进可能只剩几像素
别信“2em 就等于两个汉字”——微软雅黑下 16px 字号时 2em ≈ 32px，刚好覆盖两个汉字；但换到思源黑体或小字号设备上，偏差立刻可见。起点用 2em，再根据实际字体微调。
表格单元格（<td>）和 Flex 容器里缩进失效怎么办
<p>这不是 bug，是格式化上下文天然限制：<code>text-indent 依赖“块级盒”和“首行盒”，而 <td> 默认是 <code>display: table-cell，Flex item 默认 width: auto，都不稳定生成标准首行。
<td> 场景：直接用 <code>td, th { padding-left: 2em; }——不依赖行盒，所有浏览器都认；若必须保留首行语义（如导出 PDF），改用 <td><div style="text-indent: 2em;">内容</div></td>
- Flex/Grid 容器：首选
padding-left: 2em；若坚持用 text-indent，给 <p></p> 显式加 display: block; width: 100%;，并确保父容器未设 overflow: hidden
- 别在导航菜单、卡片标题这类本就不该有“段落缩进”语义的地方硬套
text-indent——那是间距问题，该用 margin-left 或 padding-left
调试技巧：临时给 <td> 加 <code>background: #ff0，观察文字是否真向右偏移；如果背景框内文字仍贴左顶边，说明 text-indent 没触发，立刻切到 padding-left。
如何统一缩进但排除首段、标题、引用等特殊段落
全局设 p { text-indent: 2em; } 很方便，但真实排版中例外远多于规则：
- 首段不缩进：
.content p:first-child { text-indent: 0; }
- 标题类段落（如
<p class="title"></p>）：p.title { text-indent: 0; }
- 引用段落反向缩进：
blockquote p { text-indent: -1em; padding-left: 1em; }（负缩进 + 左内边距防文字溢出）
- 避免用
:not() 写复杂选择器，CSS 优先级易失控；宁可显式加类、再单独重置
真正难的不是写对那行 text-indent: 2em，而是确认它在所有上下文里都按预期工作：表格里、Flex 容器里、富文本输出的 HTML 里、打印预览里……每个环境都可能悄悄绕过这个属性。
<td> 场景：直接用 <code>td, th { padding-left: 2em; }——不依赖行盒，所有浏览器都认；若必须保留首行语义（如导出 PDF），改用 <td><div style="text-indent: 2em;">内容</div></td>
padding-left: 2em；若坚持用 text-indent，给 <p></p> 显式加 display: block; width: 100%;，并确保父容器未设 overflow: hidden
text-indent——那是间距问题，该用 margin-left 或 padding-left
调试技巧：临时给 <td> 加 <code>background: #ff0，观察文字是否真向右偏移；如果背景框内文字仍贴左顶边，说明 text-indent 没触发，立刻切到 padding-left。
如何统一缩进但排除首段、标题、引用等特殊段落
全局设 p { text-indent: 2em; } 很方便，但真实排版中例外远多于规则：
- 首段不缩进：
.content p:first-child { text-indent: 0; } - 标题类段落（如
<p class="title"></p>）：p.title { text-indent: 0; } - 引用段落反向缩进：
blockquote p { text-indent: -1em; padding-left: 1em; }（负缩进 + 左内边距防文字溢出） - 避免用
:not()写复杂选择器，CSS 优先级易失控；宁可显式加类、再单独重置
真正难的不是写对那行 text-indent: 2em，而是确认它在所有上下文里都按预期工作：表格里、Flex 容器里、富文本输出的 HTML 里、打印预览里……每个环境都可能悄悄绕过这个属性。
