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 artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill10246" title="HTML Text Extract"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20dee630206.jpg" alt="HTML Text Extract" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill10246" title="HTML Text Extract" class="overflowclass">HTML Text Extract</a> <p class="overflowclass">从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。</p> </div> <a rel="nofollow" href="/xiazai/skill10246" title="HTML Text Extract" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>被设成display: inline或inline-block：块级盒行为丢失，“首行”概念失效 - 父容器是
display: flex且未设align-self: flex-start：基线对齐干扰了缩进定位 - 段落开头是
<img>、<svg></svg>等内联替换元素：缩进发生在该元素左侧，视觉上等于没动 - 富文本编辑器输出或 CSS-in-JS 注入了
text-indent: 0 !important，直接覆盖你的规则
表格单元格（<td>）里怎么安全缩进<p><code>text-indent 在 <td> 中极易失效，因为：<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 面板里确认最终生效值——别信代码里写的数字，只信渲染出来的像素。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
