text-indent是唯一语义正确且原生支持的首行缩进方式，但需满足块级元素、未被flex/grid干扰、单位合理等条件；常见失效原因包括display非block、内联替换元素前置、高权重重置样式及white-space限制。

text-indent 是唯一语义正确、浏览器原生支持的首行缩进方式，直接写 style="text-indent: 2em;" 就能生效——但前提是元素是块级、没被布局干扰、单位选得对。

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

不是 CSS 写错了，而是渲染条件不满足：

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

最快验证：打开开发者工具 → 查看目标 <p></p> 的 Computed 标签页 → 确认 display 是 block，且 text-indent 最终值不是 0。

text-indent 该用什么单位才靠谱

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

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

• 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 时容易错位。

表格单元格（<td>）里怎么缩进 <p><code>text-indent 在 <td> 中常失效，因为： <ul> <li>默认 <code>display: table-cell，内容单行未换行时，浏览器可能不生成明确的“首行盒”

text-align: center 或 right 会把缩进后的文字再拉回，看起来没动

富文本输出或 CSS-in-JS 库可能带 text-indent: 0 !important

更稳妥的做法：

• 直接给 <td> 加 <code>padding-left: 2em：不依赖行盒，兼容所有表格模式
• 若需保留首行缩进语义（比如导出 PDF），包裹一层 <div>：<code><td><div style="text-indent: 2em;">内容</div></td>

  别用 <pre class="brush:php;toolbar:false;"></pre>、  或 margin-left 模拟缩进

  这些做法看着像缩进，实际埋坑：

  • <pre class="brush:php;toolbar:false;"></pre> 会禁用自动换行、固定等宽字体、破坏行高，本质是代码容器，不是排版工具
  • 连写多个  ：复制粘贴易丢失、屏幕阅读器解析异常、响应式下错位风险高
  • margin-left 或 padding-left：整段左移，不是首行缩进；会破坏 text-align: justify、撑大容器、与 border/padding 叠加出意外交互

  真正麻烦的是混合场景：富文本编辑器导出的 HTML 同时含内联样式、  和 text-indent，这时候缩进逻辑互相覆盖。上线前得用浏览器开发者工具逐层检查 computed styles。