text-indent是唯一语义正确、原生支持首行缩进的手段，但仅对块级元素生效；失效主因包括元素非块级、父容器为flex/grid、white-space限制、高权重样式覆盖、direction翻转及table-cell渲染特殊性，推荐用2em单位并用开发者工具验证computed值。
text-indent 是唯一语义正确、浏览器原生支持的首行缩进手段，但写上 text-indent: 2em 不等于缩进一定生效——它只在块级上下文里起作用，且极易被布局、单位、继承关系悄悄绕过。
为什么 text-indent 加了却没效果
不是 CSS 写错了，而是渲染条件没满足：
-
<p></p>被设成display: inline或inline-block—— 浏览器压根不识别“首行”概念 - 父容器用了
display: flex或display: grid，<p></p>的块级盒行为被覆盖 - 段落开头是
<img alt="HTML段落首行缩进与行距设置教程" >、<svg></svg>或其他内联替换元素，缩进发生在该元素左侧，视觉上等于没动 - 某处高权重样式写了
p { text-indent: 0 !important }（常见于富文本编辑器输出） - 用了
white-space: nowrap或white-space: pre—— 破坏换行，“首行”失去意义
最快验证方式：打开开发者工具 → 查看目标 <p></p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill10246" title="HTML Text Extract"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20dee630206.jpg" alt="HTML Text Extract" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill10246" title="HTML Text Extract">HTML Text Extract</a>
<p>从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。</p>
</div>
<a href="/xiazai/skill10246" title="HTML Text Extract" 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><td> 默认是 <code>display: table-cell，不生成标准“首行盒”，text-indent 极易失效，尤其内容短、未换行时。
- 稳妥做法：
td, th { padding-left: 2em; } —— 不依赖行盒，所有浏览器都认
- 必须保留首行缩进语义（比如导出 PDF 需匹配印刷规范）：
<td><div style="text-indent: 2em;">内容</div></td>
- 调试时加
background: #ff0 到 <td>，看文字是否真偏移；如果背景框里文字还贴左，说明 <code>text-indent 没触发，立刻切到 padding-left
段间距和行距别混用 margin 与 line-height
三者职责分明：text-indent 管首行缩进，margin 管段与段之间空隙，line-height 管段内行高。混用反而容易出错：
- 段间距只动
margin，别碰 padding：p { margin: 1.2em 0; } 稳定可控；用 padding 模拟段距会撑大容器高度，还可能和 border 冲突
- 首段通常不该缩进，也常需去掉顶部
margin：p:first-of-type { margin-top: 0; text-indent: 0; }
-
line-height 必须用无单位值（如 1.6），避免继承异常；它和段距无关，别靠它“凑”空白
真正难的不是写对那行 text-indent: 2em，而是确认它在所有上下文里都按预期工作：表格里、Flex 容器里、富文本输出的 HTML 里、打印预览里……每个环境都可能悄悄绕过这个属性。
td, th { padding-left: 2em; } —— 不依赖行盒，所有浏览器都认<td><div style="text-indent: 2em;">内容</div></td>
background: #ff0 到 <td>，看文字是否真偏移；如果背景框里文字还贴左，说明 <code>text-indent 没触发，立刻切到 padding-left
段间距和行距别混用 margin 与 line-height
三者职责分明：text-indent 管首行缩进，margin 管段与段之间空隙，line-height 管段内行高。混用反而容易出错：
- 段间距只动
margin，别碰padding：p { margin: 1.2em 0; }稳定可控；用padding模拟段距会撑大容器高度，还可能和border冲突 - 首段通常不该缩进，也常需去掉顶部
margin：p:first-of-type { margin-top: 0; text-indent: 0; } -
line-height必须用无单位值（如1.6），避免继承异常；它和段距无关，别靠它“凑”空白
真正难的不是写对那行 text-indent: 2em，而是确认它在所有上下文里都按预期工作：表格里、Flex 容器里、富文本输出的 HTML 里、打印预览里……每个环境都可能悄悄绕过这个属性。
