text-indent: 2em 是唯一语义正确、响应可靠、可维护的首行缩进方案；它仅对块级元素生效，需避免影响 pre/code 等子元素，并优先使用 rem 或 px 保证缩进稳定。

直接用 text-indent: 2em，别敲空格、别用 padding-left、别塞   —— 这是唯一语义正确、响应可靠、可维护的方案。

为什么不能用两个全角空格或  

看似简单，但一复制就错位、一换字体就偏移、一缩放就变样；  连写多个还会被某些编辑器自动合并或过滤；更重要的是，屏幕阅读器会把它们读出来，破坏可访问性。真实项目里，这类写法上线后常被 QA 打回来重改。

text-indent: 2em 必须作用在块级元素上

它只对 p、div、h1–h6 等默认块级元素生效。常见踩坑点：

• <p><span>文字</span></p> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</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>：如果 <span></span> 是第一个子节点且为行内元素，缩进仍有效；但换成 <img alt="HTML怎么让段落自动缩进两格" > 或 <div>，首行缩进会“消失”——因为 <code>text-indent 只影响纯文本开头，遇到块级子元素就停
• <p style="display: inline;"></p>：显示模式被改了，text-indent 直接失效

• <p><br></p>

  ：

  <br>

  不是内容，第一行为空，缩进不可见

移动端和用户缩放时缩进变奇怪？单位选错了

2em 没问题，但前提是字体大小稳定。如果段落内混用不同 font-size（比如 <strong></strong> 设了 1.2em），首行缩进会以父元素字号为准，后续行文字可能视觉错位。更稳的做法：

• 全站根字体设为 16px，用 text-indent: 32px（牺牲一点响应性，换确定性）
• 或统一用 rem：text-indent: 2rem，确保缩进始终基于 :root 字号
• 避开 ch 单位：虽然理论上最贴合“两字符”，但 Safari 至今不支持，caniuse.com 上查过再用

别让 text-indent 泄露到 <pre class="brush:php;toolbar:false;">&lt;/code&gt; 和 &lt;code&gt;&lt;code&gt;&lt;/code&gt; 里&lt;/H3&gt; &lt;p&gt;很多文档页的代码块第一行莫名缩进，就是父级 &lt;code&gt;p&lt;/code&gt; 的 &lt;code&gt;text-indent&lt;/code&gt; 影响了子级 &lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;/code&gt; 的首行。解决方法很简单：&lt;/p&gt; &lt;pre class='brush:css;toolbar:false;'&gt;p { text-indent: 2em; } p pre, p code { text-indent: 0; }</pre> <p>注意：这里不是覆盖整个 <code>pre 块，而是重置其内部文本的首行缩进行为。漏掉这步，技术文档页面的代码展示就容易出视觉 bug。