text-indent: 2em是首选方案，因它相对当前元素font-size、响应式健壮、兼容性好；但2em≈1.7–2.3个中文字符宽，并非严格等于两个汉字宽度，受字体、渲染引擎影响。
text-indent 是唯一语义正确、浏览器原生支持的方案，但“两个字宽”不是固定像素值，得靠单位选对 + 渲染条件满足才能稳定呈现。
为什么 text-indent: 2em 是首选
它不依赖屏幕分辨率或系统缩放，1em ≈ 当前元素的 font-size，2em 在绝大多数中文字体（微软雅黑、思源黑体、苹方）下视觉上最接近两个汉字宽度。相比 2ch（IE 不支持、Safari 兼容差）、32px（用户放大字体时缩进卡死）、2rem（根字号一变就漂移），2em 兼容性好、响应式健壮、调试直观。
常见误操作：
- 写成
text-indent: 20px—— 高 DPI 屏或系统字体放大后，缩进会显得过小或错位 - 写成
text-indent: 2ch—— Chrome 120+ 和 Firefox 支持尚可，但 Safari 17 仍不稳定，上线前必须查 caniuse - 在
<span></span>或<a></a>上直接加text-indent—— 内联元素不生成块格式化上下文，压根不生效
text-indent 失效的四个高频原因
加了样式却没缩进，90% 是以下某条干扰了渲染链：
-
<p></p>被设为display: inline或inline-block—— 浏览器不识别“首行”概念 - 父容器是
display: flex或display: grid，且未触发 BFC —— 子<p></p>的块级盒行为被覆盖 - 段落开头是
<img>、<svg></svg>或<iframe></iframe>—— 缩进作用在该内联替换元素左侧，视觉上等于没动 - 某处高权重样式写了
p { text-indent: 0 !important }—— 富文本编辑器输出或 CSS-in-JS 库常埋这类雷
最快验证方式：打开开发者工具 → 查看目标 <p></p> 的 Computed 标签页 → 确认 display 是 block，且 text-indent 最终值不是 0。
表格单元格（<td>）里怎么缩进
<p><code>text-indent 在 <td> 中极易失效，因为默认 <code>display: table-cell 下，单行内容可能不生成明确的“首行盒”，再加上 text-align: center 会把缩进后的文字再拉回中心，看起来毫无变化。
更稳妥的做法：
- 用
padding-left: 2em直接加在<td> 上 —— 不依赖行盒，兼容所有表格模式 <li>若需保留语义（比如导出 PDF 时依赖 <code>text-indent），改用包裹结构：<td><div style="text-indent: 2em;">内容</div></td> - 避免给
<td> 同时设 <code>text-indent和text-align: right/center—— 容易叠加错位嵌套、富文本和移动端的隐藏坑
真正容易被忽略的是这些边界场景：
-
<p><strong>文字</strong>后续内容</p>——text-indent只作用于纯文本开头，遇到第一个块级或inline-block元素就停，图标或强调标签会顶到左边缘 - 微信公众号草稿箱、Notion 导出 HTML、CMS 富文本输出 —— 常带全局
text-indent: 0或内联!important，得用更高权重选择器覆盖 - iOS Safari 用户双指放大页面时，
em和rem会被重算为绝对尺寸，缩进可能突然变大；这不是 bug，是可访问性妥协，测试时务必开系统缩放模拟 - 某些 CSS 重置库（如 normalize.css）或框架（如 Bootstrap）默认清掉
p的缩进，检查 computed styles 时得往上翻继承链，不能只盯自己的样式表
-
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
