text-indent 是唯一语义正确且原生支持的首行缩进方案，但需满足段落为块级元素、未被 flex/grid/inline 破坏盒模型、单位选用合理（推荐 2em）等条件，否则将失效。
text-indent 是唯一语义正确、浏览器原生支持的首行缩进方案，直接写 p { text-indent: 2em; } 就能生效——但前提是段落是块级元素，没被 flex/grid/inline 显式破坏盒模型，且单位选得对。
为什么加了 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><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill8272" title="anything-to-html"><img
src="https://img.php.cn/upload/skill/000/000/081/179195588450431.jpg" alt="anything-to-html" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill8272" title="anything-to-html" class="overflowclass">anything-to-html</a>
<p class="overflowclass">将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。</p>
</div>
<a rel="nofollow" href="/xiazai/skill8272" title="anything-to-html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div> 的 Computed 标签页 → 确认 display 是 block，且 text-indent 最终值不是 0。
text-indent 该用什么单位才靠谱
单位选错，缩进就“看起来不对”，尤其在响应式或系统字体放大场景下：
-
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 会把缩进后的文字再拉回，看起来没动text-indent: 0 !important
更稳妥的做法：
- 直接给
<td> 加 <code>padding-left: 2em：不依赖行盒，兼容所有表格模式 - 若需保留首行缩进语义（比如导出 PDF），包裹一层
<div>：<code><td><div style="text-indent: 2em;">内容</div></td>真正麻烦的是混合场景：富文本编辑器导出的 HTML 同时含内联样式、
text-indent，这时候缩进逻辑会互相覆盖。优先清理冗余空格和内联 style，再统一用 CSS 类控制，否则调试成本远高于初始配置。
