最常用且易出错的html空格实体是 ，它不被合并但无法满足所有排版需求；直接敲空格会被解析器压缩为单个，复制粘贴可能丢失原格式； 、 、 、 宽度与语义各异，需按场景选用；white-space:pre-wrap可安全保留空白并换行；letter-spacing等css属性不能替代空格实体。

  是最常用也最容易出错的 HTML 空格实体，它不会被浏览器合并，但也不能解决所有排版需求。直接敲空格键、复制粘贴空格、用 CSS 控制间距——这些方法在不同场景下效果差异很大，选错就容易导致布局错位、SEO 不友好或中文缩进失效。

为什么直接敲多个空格没用

HTML 解析器在词法分析阶段就把所有连续空白字符（空格、制表符、换行符）统一转成单个 U+0020，并在渲染时进一步压缩为一个可见空格。哪怕你在 <p></p> 里敲了 10 个空格，最终显示的还是一个。

• 这种压缩发生在 DOM 构建前，和 CSS 无关
• 即使把内容放在 <span></span> 或 <div> 里，只要没加特殊处理，照样被压 <li>复制粘贴文本时，<code>  常被编辑器或 CMS 自动转成普通空格（U+0020），导致“明明写了却没生效”

  和  、  的宽度与行为差异

它们都是 Unicode 空格字符的 HTML 实体写法，但语义和渲染宽度不同：

•  ：不换行空格，宽度 ≈ 普通 ASCII 空格（约 0.25em），阻止断行，适合英文单词间防拆分
•  ：en 空格，宽度固定为 0.5em，不受字体影响，适合对齐控制
•  ：em 空格，宽度固定为 1em，常用于中文段首缩进（等同一个汉字宽）
•  ：窄空格，宽度仅 1/6em，适合微调字母间距

注意：  和   在老旧浏览器（如 IE9 及以下）中兼容性较差，若需支持，得 fallback 到   + CSS 宽度控制。


Wechat HTML Publisher
直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。
下载

white-space: pre / pre-wrap 能保留原始空格，但有副作用

设置 white-space: pre 后，HTML 中所有空格、制表符、换行都会原样输出，看起来像“所见即所得”。但它会强制禁用自动换行，长文本可能溢出容器。

• pre：保留所有空白，不换行（除非遇到 <br>）
• pre-wrap：保留空白，但允许自动换行 —— 更安全的选择
• pre-line：合并连续空格，但保留换行符 —— 适合日志类文本

别滥用 <pre class="brush:php;toolbar:false;"></pre> 标签本身：它自带等宽字体和 margin，语义上表示“预格式化代码”，搜索引擎可能误判内容类型。

CSS 的 letter-spacing 和 word-spacing 不是空格替代方案

这两个属性调整的是“字符/单词之间的间隙”，不是插入真实空格节点，所以：

• 无法用于实现首行缩进（text-indent 才是正解）
• 会影响整个元素内所有文字的视觉密度，比如 letter-spacing: 2px 会让“Hello”变成 “H e l l o”式分散
• 对中文效果不稳定 —— 中文没有明确“word”边界，word-spacing 基本无效
• 不能替代   防止换行的需求，比如 “Mr. Smith” 中的防断开必须用实体

真正需要精确控制空格数量和位置时，优先组合使用  、  和 white-space: pre-wrap；纯视觉微调才考虑 CSS 间距属性。中文排版里，  比堆砌十个   更语义清晰、维护成本更低。