最直接方式是用 CSS 的 text-indent 属性作用于块级元素（如 ），设 text-indent: 2em；它仅缩进首行，不适用于内联元素，且优于手动加空格或全角空格。
用 text-indent 实现首行缩进最直接
HTML 本身不处理排版细节，首行缩进必须靠 CSS。最标准、最可控的方式是给段落元素（比如 <p></p>）设置 text-indent 属性。
注意：这个属性只作用于**块级元素的第一行**，对 <div>、<code><p></p>、<h1></h1> 等有效，但对 <span></span> 或内联元素无效（除非先设 display: block）。
常见写法示例：
p {
text-indent: 2em;
}
-
2em是常用值，约等于当前字体大小的两倍，比用px更适配不同字号 - 负值（如
-1em）可用于向左缩进，但极少用于首行，多见于悬挂缩进场景 - 不要对整个
或设text-indent，它不会继承生效
为什么不用 或全角空格？
手动在每段开头加 或输入中文空格，看似简单，但实际埋了不少坑：
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 编辑时看不见、难定位，多人协作容易漏加或重复加
- 响应式下字体缩放或换行位置变化时，缩进可能错位甚至跑到第二行
- 复制文本时会把多余空格一起复制出去，影响数据清洗或 SEO 提取
- 无法统一控制——比如想把所有段落缩进从
2em改成1.5em，CSS 一行就搞定，而 HTML 里得逐个改
遇到 pre 标签或代码块里的文字不缩进？
<pre class="brush:php;toolbar:false;"></code> 默认保留原始空白符，且 <code>white-space: pre</code> 会让 <code>text-indent</code> 失效。如果你真需要在预格式化内容里模拟首行缩进，有两条路：</p>
<ul>
<li>改用 <code><div></code> + <code>white-space: pre-wrap</code>，再加 <code>text-indent</code>（推荐）</li>
<li>放弃 <code>text-indent</code>，用 <code>padding-left</code> 模拟，但注意这会整体左移全部内容，不是“仅首行”</li>
</ul>
<p>例如：</p>
<pre class='brush:php;toolbar:false;'>code-block {
white-space: pre-wrap;
text-indent: 2em;
}</pre>
<h3>移动端或小屏幕下缩进看起来太宽？</h3>
<p><code>em 单位虽然相对，但若用户缩放字体或系统启用“更大字体”辅助功能，2em 可能撑出水平滚动条。更稳妥的做法是配合媒体查询做降级：
p {
text-indent: 2em;
}
@media (max-width: 480px) {
p {
text-indent: 1.5em;
}
}
另外，iOS Safari 对 text-indent 在某些字体组合下偶有渲染偏差，如果发现首行缩进轻微错位，加一句 transform: translateZ(0) 强制硬件加速有时能缓解——但这属于边缘 case，别一上来就加。
真正要留心的是：缩进只是视觉提示，别让它干扰可访问性。屏幕阅读器不感知 text-indent，所以段落结构仍得靠语义化标签（<p></p>、<article></article>）和 ARIA 来保障。
