html中连续空格被浏览器合并是因规范定义的“空白字符折叠”行为；可用 实现不可折叠空格，但推荐用css的white-space属性或margin/padding控制间距。

HTML里连续空格为什么直接被合并了

浏览器默认会把 HTML 文本中的多个连续空格、制表符、换行符全部压缩成一个空格，这是 HTML 规范定义的“空白字符折叠”行为。所以写     或者直接敲三个空格，页面上都只显示一个空格间距。

用   实现可控的连续空格

  是不换行空格（non-breaking space）的 HTML 实体，它不会被折叠，也不会在行尾被断开。需要几个空格就写几个  ：

<p>左边<span>   </span>右边</p>

上面这段会稳定显示“左边”和“右边”之间有 3 个空格宽度。

• 每个   占一个标准字符宽度，和字母 i 或 l 的宽度基本一致（取决于字体）
• 不能用   模拟缩进对齐表格或代码块——语义不对，且响应式下容易错位
• 大量使用时建议用 CSS 替代，比如 margin-left: 3em 或 padding-left: 24px

更灵活的替代方案：CSS 的 white-space

如果要保留整段文本里的空格、缩进和换行（比如展示代码片段或诗歌），直接用 white-space 更干净：

Wechat HTML Publisher

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

下载

<pre class="brush:php;toolbar:false;">  这行开头有两个空格<br>    这行有四个

或者加内联样式：

<p style="white-space: pre;">  a    b</p>

常用值说明：

• pre：完全保留空格、制表符、换行，像 <pre class="brush:php;toolbar:false;"></pre> 标签一样
• pre-wrap：保留空格和换行，但允许自动换行（推荐日常使用）
• pre-line：合并连续空格，但保留换行符（类似普通段落加换行）

别踩这些坑

实际写的时候容易忽略几点：

• 复制粘贴代码时，编辑器可能把   显示成普通空格，但源码里没写对——检查 HTML 源码是否真有  
•   和   虽然存在，但兼容性差（尤其旧版 IE），宽度也不统一，不建议用
• 用   做布局对齐，一旦字体大小变化，空格宽度跟着变，而 em 或 ch 单位的 CSS 更可靠
• 服务端渲染或模板引擎（如 Jinja、Thymeleaf）可能自动转义   成纯文本，得确认是否双写为  

真正需要“视觉上空几格”，优先想 CSS；只有极简静态页、邮件模板或受限环境才靠   硬撑。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！