HTML怎么让段落自动缩进两格-html教程-PHP中文网

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

html怎么让段落自动缩进两格

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

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

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

<p><span>文字</span></p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" 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 rel="nofollow" href="/xiazai/skill8272" title="anything-to-html" class="overflowclass">anything-to-html</a> <p class="overflowclass">将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。</p> </div> <a rel="nofollow" href="/xiazai/skill8272" title="anything-to-html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>：如果 <span></span> 是第一个子节点且为行内元素，缩进仍有效；但换成 <img> 或 <div>，首行缩进会“消失”——因为 <code>text-indent 只影响纯文本开头，遇到块级子元素就停
<p style="display: inline;"></p>：显示模式被改了，text-indent 直接失效
```
<p><br></p>
```
：
```
<br>
```
不是内容，第一行为空，缩进不可见

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

很多文档页的代码块第一行莫名缩进，就是父级 p 的 text-indent 影响了子级 <pre class="brush:php;toolbar:false;"></pre> 的首行。解决方法很简单：

p {
  text-indent: 2em;
}
p pre,
p code {
  text-indent: 0;
}

注意：这里不是覆盖整个 pre 块，而是重置其内部文本的首行缩进行为。漏掉这步，技术文档页面的代码展示就容易出视觉 bug。

HTML怎么让段落自动缩进两格