text-indent 仅缩进首行，是浏览器原生支持的首行缩进属性；设为2em最稳妥，负值可实现悬挂缩进；失效常见原因包括display非block、内联替换元素干扰、white-space异常及table-cell限制。
text-indent 只缩进首行，这是它的本职工作
浏览器原生就支持首行缩进，靠的就是 text-indent 属性。它天生只影响段落的第一行，后续行自动对齐左边界——这正是“首行与其他行不同缩进”的标准实现方式，不需要额外 hack。
常见错误是误用 padding-left：它会让整段文字右移，所有行都缩进相同距离，完全达不到“仅首行不同”的效果。
-
text-indent: 2em是中文排版最稳妥的写法，随字号缩放，响应式友好 - 若设成负值（如
text-indent: -1em），可实现悬挂缩进（参考文献常用） - 别给
<p></p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" 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 href="/xiazai/skill8272" title="anything-to-html">anything-to-html</a> <p>将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。</p> </div> <a href="/xiazai/skill8272" title="anything-to-html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>加display: inline或套在flex容器里不触发 BFC——否则text-indent直接失效
为什么加了 text-indent 却看不出首行缩进
不是代码没写对，而是渲染条件没满足。打开开发者工具，直接看目标元素的 Computed 标签页，重点确认两件事：display 是否为 block，text-indent 的最终计算值是否非零。
- 段落开头有
<img alt="如何设置HTML段落首行与其他行不同缩进" >、<svg></svg>等内联替换元素时，缩进发生在该元素左侧，视觉上像没动 -
white-space: nowrap或white-space: pre会破坏换行逻辑，“首行”概念失效 - 富文本编辑器输出的 HTML 常带高权重内联样式，比如
style="text-indent: 0 !important"，直接覆盖你的设置 - 父容器用了
display: grid或display: flex，且未显式让<p></p>生成独立块级盒
表格单元格（<td>）里怎么让首行缩进生效
text-indent 在 <td> 中理论上可用，但实际极易失效——因为 table-cell 的格式化规则特殊，单行短文本常不生成明确的“首行盒”，缩进像素被内容吞没，肉眼不可见。
立即学习“前端免费学习笔记（深入）”；
- 最可靠做法：直接给
<td>加padding-left: 2em，不依赖行盒，兼容所有表格模式 - 若必须保留语义（例如导出 PDF 需匹配印刷规范），用
<td><div style="text-indent: 2em;">内容</div></td> - 避免对整个
<table>设置text-indent：它会继承到<th>，表头可能被意外缩进 - 调试时临时加
background: #ff0到<td>，看文字是否真向右偏移；若文字仍顶左，说明text-indent没触发
em 和 ch 单位在中文缩进里的实际差异
2em 被广泛推荐，但它不是“两个汉字宽度”的精确等价物——它是当前 font-size 的两倍，而一个汉字的实际像素宽度取决于字体设计（比如等宽字体 vs. 微软雅黑）。2ch 更贴近字符语义（1ch ≈ 字符 "0" 的宽度），但在 IE 和部分中文字体中支持不稳定。
- 日常网页开发用
2em就够了：它随系统字体放大/缩放，无障碍友好，兼容性拉满 - 出版级静态页或 Canvas 文本可考虑
text-indent: 32px，但需锁定font-family和font-size - 别用
2%：缩进量随列宽变化，窄屏下可能只剩几像素，根本看不出效果 - 慎用
2rem：如果项目用 JS 动态改html { font-size }（如夜间模式），缩进会跟着跳变，破坏段首对齐节奏
真正容易被忽略的是 white-space 和 direction 的隐式干扰：当段落含 white-space: pre-wrap 或混用 direction: rtl 时，text-indent 可能缩错行或缩反方向。这类场景下，先验证 computed 值，再决定是否绕过语义、改用 padding-left 或包裹 <div>。
