text-indent 仅对块级元素首行生效，display 非 block、overflow 裁剪、内联替换元素开头、强制重置或 white-space 异常均会导致失效；单位推荐 2em，表格和 Flex 中应改用 padding-left 或显式设 display: block。

直接用 text-indent，别加空格、别套 padding-left，否则不是缩进，是偏移。

为什么 text-indent: 2em 有时完全没反应

不是代码写错了，而是浏览器压根没触发“首行”计算逻辑：

• display 不是 block：比如
  被设成 display: inline 或套在 flex 容器里且未显式声明 display: block
• 父容器有 overflow: hidden 且缩进值过大，直接把首行裁掉（临时加 padding-left: 1em 就能验证）
• 段落开头是 或 这类内联替换元素，text-indent 作用在它左边，视觉上文字没动
• 某处写了 p { text-indent: 0 !important }（富文本编辑器导出 HTML 常见）
• 用了 white-space: nowrap 或 pre，导致“首行”语义失效

最快确认方式：打开开发者工具 → 查看目标

的 Computed 标签页 → 检查 display 是否为 block，text-indent 最终值是否非零。

text-indent 该用 em、ch 还是 px

单位选错，缩进就“看起来不对”，尤其在响应式或系统字体放大的场景下：

DeepBI DHTML 页面生成器

生成可在 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，再根据实际字体微调。

表格单元格（）和 Flex 容器里缩进失效怎么办

这不是 bug，是格式化上下文天然限制：text-indent 依赖“块级盒”和“首行盒”，而 默认是 display: table-cell，Flex item 默认 width: auto，都不稳定生成标准首行。

• 场景：直接用 td, th { padding-left: 2em; }——不依赖行盒，所有浏览器都认；若必须保留首行语义（如导出 PDF），改用
  内容
• Flex/Grid 容器：首选 padding-left: 2em；若坚持用 text-indent，给
  显式加 display: block; width: 100%;，并确保父容器未设 overflow: hidden
• 别在导航菜单、卡片标题这类本就不该有“段落缩进”语义的地方硬套 text-indent——那是间距问题，该用 margin-left 或 padding-left

调试技巧：临时给 加 background: #ff0，观察文字是否真向右偏移；如果背景框内文字仍贴左顶边，说明 text-indent 没触发，立刻切到 padding-left。

如何统一缩进但排除首段、标题、引用等特殊段落

全局设 p { text-indent: 2em; } 很方便，但真实排版中例外远多于规则：

• 首段不缩进：.content p:first-child { text-indent: 0; }
• 标题类段落（如
  ）：p.title { text-indent: 0; }
• 引用段落反向缩进：blockquote p { text-indent: -1em; padding-left: 1em; }（负缩进 + 左内边距防文字溢出）
• 避免用 :not() 写复杂选择器，CSS 优先级易失控；宁可显式加类、再单独重置

真正难的不是写对那行 text-indent: 2em，而是确认它在所有上下文里都按预期工作：表格里、Flex 容器里、富文本输出的 HTML 里、打印预览里……每个环境都可能悄悄绕过这个属性。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！