text-indent是唯一语义正确的首行缩进方式，必须作用于块级元素（如p），仅缩进第一行开头；生效前提为display为block、未被flex/grid干扰、单位选em最稳妥，禁用空格或标签模拟。
text-indent 是唯一语义正确的首行缩进方式
直接写 text-indent: 2em 就能生效，但前提是元素必须是块级、没被布局干扰、单位选得对。它只影响第一行开头，后续行左对齐不变——这才是“首行缩进”的本意。别用 连写或 模拟，那不是缩进，是视觉凑数，可访问性差、响应式错位、复制粘贴还容易丢空格。
为什么加了 text-indent 却没缩进
不是代码错了，是浏览器压根没生成“首行盒”。常见失效场景包括：
-
<p></p>被设成display: inline或inline-block—— 浏览器不识别“首行”概念 - 父容器用了
display: flex或display: grid，且没触发 BFC，<p></p>的块级行为被覆盖 - 段落开头是
<img alt="HTML段落开头怎么灵活调整缩进" >、<svg></svg>等内联替换元素，缩进发生在该元素左侧，视觉上等于没动 - 某处高权重样式写了
p { text-indent: 0 !important }（富文本编辑器输出常见） - 用了
white-space: nowrap或white-space: pre—— 换行被禁用，“首行”失去意义
最快验证：打开开发者工具 → 查看目标 <p></p> 的 Computed 标签页 → 确认 display 是 block，且 text-indent 最终值不是 0。
2em 是最稳妥的单位选择
单位选错，缩进就“看起来不对”，尤其在系统字体放大、DPI 变化或响应式切换时：
把任意文章或文档内容转换成精美的全屏翻页 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 时容易错位。
表格单元格（<td>）和 Flex/Grid 里怎么缩进
<p><code>text-indent 在 <td> 中常失效，因为默认 <code>display: table-cell，内容单行未换行时，浏览器可能不生成明确的“首行盒”；再加上 text-align: center 或 right，缩进后的文字会被再拉回，看起来没动。
更稳妥的做法：
- 给
<td> 加 <code>padding-left: 2em：不依赖行盒，兼容所有表格模式 - 若需保留首行缩进语义（比如导出 PDF），包裹一层
<div>：<code><td><div style="text-indent: 2em">内容</div></td> - Flex/Grid 容器里，首选
padding-left: 2em；若必须用text-indent，给<p></p>显式加display: block，并确保其width不是auto（flex item 默认width: auto可能导致退化）
真正容易被忽略的是：缩进不是万能排版工具。导航菜单、卡片标题这类本就不该有“段落缩进”语义的地方，硬套 text-indent 是错把间距问题当缩进问题——该用 margin-left 或 padding-left 控制整体位置。
