text-indent是唯一语义正确且原生支持的首行缩进方式，但其效果受单位选择、元素display类型及渲染上下文影响；2em最常用但需确认computed值，td中宜用padding-left或嵌套div保障兼容性。
text-indent 是唯一语义正确、浏览器原生支持的首行缩进控制方式，但缩进“看起来对不对”，取决于单位选法、元素类型和上下文渲染条件。
为什么 text-indent: 2em 有时缩得太多或太少
em 单位基于当前元素的 font-size，而中文字符实际宽度受字体、字重、font-feature-settings 影响，并不严格等于 1em。例如：
-
font-size: 16px下，text-indent: 2em算出来是 32px，但微软雅黑中一个汉字宽度约 14–15px，两个汉字≈28–30px——略大；而思源黑体下可能更接近 -
text-indent: 2ch更贴近“字符宽度”语义（1ch ≈ “0” 字宽），但 IE 完全不支持，且多数中文字体里1ch远小于一个汉字，实测常缩不足 -
text-indent: 32px在高 DPI 屏或系统字体放大时会失准；text-indent: 2%随父容器宽度变化，窄屏下可能只剩几像素
text-indent 失效的三个高频场景
加了样式却没缩进，大概率不是写错了，而是渲染前提被破坏：
-
<p></p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill9972" title="Wechat Article Html"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg" alt="Wechat Article Html" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill9972" title="Wechat Article Html">Wechat Article Html</a> <p>将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。</p> </div> <a href="/xiazai/skill9972" title="Wechat Article Html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>被设成display: inline或inline-block：块级盒行为丢失，“首行”概念失效 - 父容器是
display: flex且未设align-self: flex-start：基线对齐干扰了缩进定位 - 段落开头是
<img alt="如何控制HTML段落文字的缩进大小" >、<svg></svg>等内联替换元素：缩进发生在该元素左侧，视觉上等于没动 - 富文本编辑器输出或 CSS-in-JS 注入了
text-indent: 0 !important，直接覆盖你的规则
表格单元格（<td>）里怎么安全缩进
<p><code>text-indent 在 <td> 中极易失效，因为：<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<ul>
<li>默认 <code>display: table-cell，若内容单行不换行，浏览器可能不生成明确的“首行盒”
text-align: center 或 right 会把缩进后的文字再拉回中心/右侧，白忙一场border-collapse: collapse 或 font-size: 0 等样式间接抑制行盒创建真正稳妥的做法只有两个：
- 直接给
<td> 加 <code>padding-left: 2em：不依赖首行语义，所有浏览器一致生效 - 若需保留印刷语义（如导出 PDF），用包裹：
<td><div style="text-indent: 2em;">内容</div></td> -
padding-left推动整个盒子左内边距，第二行、第三行也跟着右移，破坏段落结构语义 - 若有背景色或边框，
padding-left产生的空白区域也会被染色，视觉突兀 - 和
text-indent同时使用会叠加，调试时难以判断偏移来源 - 响应式场景下，
padding-left: 20px在字体放大后缩进比例变小，而2em保持等比
别用 padding-left 替代 text-indent 的原因
它们解决的是不同问题：
真正要控制“首行缩进大小”，核心就一条：盯紧 display 是否为 block，单位用 2em，然后在开发者工具的 Computed 面板里确认最终生效值——别信代码里写的数字，只信渲染出来的像素。
