text-indent是唯一语义正确的首行缩进方式，必须作用于块级元素（如p），仅缩进第一行开头；生效前提为display为block、未被flex/grid干扰、单位选em最稳妥，禁用空格或标签模拟。

text-indent 是唯一语义正确的首行缩进方式

直接写 text-indent: 2em 就能生效，但前提是元素必须是块级、没被布局干扰、单位选得对。它只影响第一行开头，后续行左对齐不变——这才是“首行缩进”的本意。别用   连写或   模拟，那不是缩进，是视觉凑数，可访问性差、响应式错位、复制粘贴还容易丢空格。

为什么加了 text-indent 却没缩进

不是代码错了，是浏览器压根没生成“首行盒”。常见失效场景包括：

• 被设成 display: inline 或 inline-block —— 浏览器不识别“首行”概念
• 父容器用了 display: flex 或 display: grid，且没触发 BFC，
  的块级行为被覆盖
• 段落开头是 、 等内联替换元素，缩进发生在该元素左侧，视觉上等于没动
• 某处高权重样式写了 p { text-indent: 0 !important }（富文本编辑器输出常见）
• 用了 white-space: nowrap 或 white-space: pre —— 换行被禁用，“首行”失去意义

最快验证：打开开发者工具 → 查看目标

的 Computed 标签页 → 确认 display 是 block，且 text-indent 最终值不是 0。

2em 是最稳妥的单位选择

单位选错，缩进就“看起来不对”，尤其在系统字体放大、DPI 变化或响应式切换时：

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

• 2em：1em ≈ 当前 font-size，缩进随字号同步变化，中文下视觉接近两字符宽度，兼容性好、适配阅读习惯
• 2ch：语义更准（1ch ≈ 字符 “0” 宽度），但 IE 不支持，且多数中文字体里 1ch 远小于一个汉字
• 32px 或 20px：仅限字体大小绝对固定的静态页；系统缩放后缩进会显得过小
• 2%：按父容器宽度计算，窄屏下可能只剩几像素，完全不够
• 2rem：若项目用 JS 动态改 html { font-size }（如夜间模式），缩进会意外跳变

别用负值或百分比去兼容 IE8；text-indent: -1em 和 text-indent: 5% 在 IE8 中支持极不稳定，尤其配合 direction: rtl 时容易错位。

表格单元格（）和 Flex/Grid 里怎么缩进

text-indent 在 中常失效，因为默认 display: table-cell，内容单行未换行时，浏览器可能不生成明确的“首行盒”；再加上 text-align: center 或 right，缩进后的文字会被再拉回，看起来没动。

更稳妥的做法：

• 给 加 padding-left: 2em：不依赖行盒，兼容所有表格模式
• 若需保留首行缩进语义（比如导出 PDF），包裹一层
  ：

  内容
• Flex/Grid 容器里，首选 padding-left: 2em；若必须用 text-indent，给
  显式加 display: block，并确保其 width 不是 auto（flex item 默认 width: auto 可能导致退化）

真正容易被忽略的是：缩进不是万能排版工具。导航菜单、卡片标题这类本就不该有“段落缩进”语义的地方，硬套 text-indent 是错把间距问题当缩进问题——该用 margin-left 或 padding-left 控制整体位置。