HTML中段落首行缩进应使用text-indent而非空格，因其精准可控、自适应字体大小；全角空格需求可用padding-left:2ch或服务端替换方案；避免pre和white-space:pre破坏布局。
为什么 和空格在段落开头会错位
HTML 默认把连续空白符（空格、换行、制表符）压缩成一个空格，且忽略块级元素开头的空白。所以你在 <p> 文字</p> 里敲多个空格或用 ，浏览器可能直接吃掉，或者只渲染一个，导致首行缩进看起来“时有时无”。更麻烦的是，不同字体、字号下 的宽度不一致，font-family: "Microsoft YaHei" 和 "Noto Sans CJK" 下缩进像素值可能差 2–3px。
用 text-indent 替代手动空格最稳妥
这是唯一能精确控制首行缩进的 CSS 方式，不受字体、编码、换行影响：
p {
text-indent: 2em; /* 推荐用 em，随字体大小自适应 */
}注意几个关键点：
-
text-indent只作用于第一行，后续行不受影响 - 别用
px固定值——小字号下 20px 缩进会显得过大，大字号下又不够 - 如果段落内有
<span></span>或<strong></strong>紧贴开头，text-indent仍生效，无需额外处理 - 遇到
display: inline-block或浮动子元素，可能触发 BFC 导致缩进失效，此时加overflow: hidden或改用margin-left临时绕过
哪些情况不能只靠 text-indent
比如新闻稿、古籍排版需要「中文全角空格」风格的缩进（两个汉字宽，且必须是全角），而 text-indent: 2em 在等宽字体下刚好，但在比例字体下可能略窄。这时可以：
立即学习“前端免费学习笔记（深入）”；
- 用
::first-line伪元素 +content: " "（插入两个全角空格），但兼容性差，IE 完全不支持 - 给
<p></p>加padding-left: 2ch，ch单位基于 “0” 字符宽度，在多数中文字体下接近一个汉字，比em更贴近视觉预期 - 服务端或构建时用正则把段落开头的
^ +（全角空格）替换成带style="text-indent:2em"的<span></span>，适合静态生成场景
避免用 <pre class="brush:php;toolbar:false;"></code> 或 <code>white-space: pre</code> 强制保留空格</H3><p>这类写法会让所有换行、空格原样输出，破坏响应式布局：</p><ul><li><code><pre class="brush:php;toolbar:false;"><p> 文字</p></pre> 会多出上下外边距和等宽字体，和正文风格割裂
white-space: pre 会让段内换行也生效，用户复制文本时会多出不可见换行符真正要保留结构化空白的地方（如代码块、诗歌），才该用 <pre class="brush:php;toolbar:false;"></pre>；普通段落，坚持用 text-indent + 合理单位就够了。容易被忽略的是：当段落被 flex 或 grid 容器包裹时，text-indent 依然有效，但若父容器设了 justify-content: center，视觉上缩进会被居中抵消——这时候得检查布局层级，而不是调大 text-indent 值。
