text-indent: 2em 是唯一语义正确且浏览器原生支持的首行缩进方式，但仅对块级元素生效；失效主因是元素非块级（如被flex压成inline-block）、开头含内联替换元素、高优先级样式覆盖、white-space限制或table-cell等特殊上下文。

直接写 style="text-indent: 2em" 就行，但必须确保 <p></p> 是块级元素、开头没内联替换元素、且没被更高优先级样式覆盖。

为什么 style="text-indent: 2em" 有时不生效

这不是语法错，而是渲染条件被破坏：

• <p></p> 被父容器（比如 display: flex）压成 inline-block 或干扰了块格式化上下文
• 段落开头是 <img>、<svg></svg> 或 emoji，text-indent 作用在该元素左侧，文字本身没动
• 富文本编辑器输出的 <p style="text-indent: 0"></p> 直接覆盖你的内联值
• 用了 white-space: nowrap 或 pre，浏览器不生成“首行盒”

最快验证方式：打开开发者工具 → 找到该 <p></p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill9263" title="Html2md"><img src="https://img.php.cn/upload/skill/000/000/081/179249945220127.jpg" alt="Html2md" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="overflowclass">Html2md</a> <p class="overflowclass">使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...</p> </div> <a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> → 切到 Computed 标签页 → 确认 display 是 block，且 text-indent 的最终计算值不是 0。

text-indent 内联时单位怎么选

单位选错，缩进就“看起来不对”，尤其在系统缩放或响应式场景下：

• 用 2em：最稳妥。它随当前 font-size 缩放，16px 下≈32px，基本贴合两个中文字宽
• 别用 20px 或 32px：高 DPI 屏或 zoom=150% 时缩进会明显偏小
• 慎用 2rem：若项目动态改过 html { font-size }（如夜间模式），缩进会意外跳变
• 避免 2%：按父容器宽度算，窄屏（如 320px）下只剩 6.4px，远不够一字符

内联缩进 vs 类选择器，什么情况该用内联

内联样式适合这些真实场景：

• CMS 或富文本编辑器导出的 HTML，无法改外链 CSS，只能靠 style 覆盖默认缩进
• 邮件模板中兼容性要求高，!important 不稳定，干脆把 text-indent: 2em 写死在标签里
• A/B 测试某几段行为，需要快速开关缩进，不牵扯样式表重构

但注意：p[style*="text-indent"] 这类属性选择器优先级低于内联，想全局重置得用 p[style] { text-indent: 2em !important } —— 这种写法容易失控，只建议临时调试。

表格单元格（<td>）里内联缩进失败怎么办 <p><code><td> 默认是 <code>display: table-cell，不生成标准首行盒，text-indent 极易失效，尤其内容短、未换行时：

• 首选方案：<td style="padding-left: 2em"> —— 不依赖首行语义，所有浏览器都认 <li>若必须保留印刷语义（比如导出 PDF）：<code><td><div style="text-indent: 2em">内容</div></td>
• 调试技巧：临时加 style="background: #ff0" 到 <td>，看文字是否真向右偏移；若背景框内文字仍贴左，说明 <code>text-indent 没触发，立刻切到 padding-left

  真正难的不是写对那行 style="text-indent: 2em"，而是确认它在富文本片段、邮件客户端、打印预览、Flex 卡片里全都按预期工作——每个环境都可能悄悄绕过这个属性。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！