text-indent是唯一语义正确、原生支持首行缩进的手段，但仅对块级元素生效，常见失效原因包括元素非块级、父容器为flex/grid、首行含内联替换元素、高权重样式覆盖，推荐用2em单位并配合开发者工具验证computed值。

text-indent 是唯一语义正确、浏览器原生支持的首行缩进手段，但它只对块级元素生效，且极易被布局上下文干扰——别一加就以为完事了，得先确认它真能起作用。

为什么 text-indent 加了却没缩进

不是 CSS 写错了，而是渲染条件不满足：

• <p></p> 被设成 display: inline 或 inline-block —— 浏览器根本不识别“首行”概念
• 父容器用了 display: flex 或 display: grid，<p></p> 的块级盒行为被覆盖，text-indent 失效
• 段落开头是 <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/skill6712" title="Wechat HTML Publisher"><img src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a> <p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p> </div> <a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" 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%：按父容器宽度计算，和字体无关——窄屏下缩进可能只剩几像素，完全不够

避免混用 rem：若项目用 JS 动态改 html { font-size }，2rem 缩进会跟着漂移，破坏段首对齐节奏。

表格单元格（<td>）里怎么缩进 <p><code>text-indent 在 <td> 和 <code><th> 中常失效，因其默认 <code>display: table-cell，需内容换行才能生成首行盒：

• 短文本（如 “是”、“否”）没换行 → 浏览器认为“整段即首行”，缩进像素被内容吞没，实际生效却看不见
• 更稳妥方案是绕过“首行”语义，直接控制内容位置：padding-left: 2em 不依赖行盒，兼容所有表格模式
• 若需保留首行缩进语义（例如导出 PDF 时匹配印刷规范），可包裹一层 <div>：<code><td><div style="text-indent: 2em;">内容</div></td>
• 避免对整个 <table> 设 <code>text-indent：它会继承到所有后代，包括 <th>，容易误缩进表头 <h3>第一段不缩进怎么跳过</h3> <p>导语、标题后紧跟的段落通常不该缩进，硬写 <code>text-indent: 0 覆盖全局规则容易漏掉或冲突：
  • p:first-of-type { text-indent: 0; } —— 适合结构固定、首段总在最前的页面
  • p.no-indent { text-indent: 0 !important; } —— 更灵活，配合 CMS 或 Markdown 渲染时手动加类
  • 慎用 :nth-of-type(1)：如果 <p></p> 前有 <h2></h2> 或 <div>，它可能选错 <p>真正麻烦的不是写法本身，而是当 <code><p></p> 被嵌套在 flex 容器里、又带 align-self 或 justify-content 时，text-indent 是否还受控——这种时候，padding-left 反而更直觉、更可控。