web 环境里面的空格和普通记事本不一样，普通键盘按空格键在纯文本里面可以直接打出空格，但是在 web 网页 HTML 代码当中，连续多个空格会被浏览器自动合并成单个空格，想要实现多个空格或者不换行空格效果，就需要掌握普通空格 不换行空格实体字符 CSS 控制间距这几种方式，很多前端新手经常遇到写了好几个空格，页面显示只有一个空格，就是浏览器默认的空白折叠规则导致的，web 空格分两种使用场景，一种是 HTML 源码里面写空格实体，另一种是用 CSS 属性实现文字间距，做排版的时候优先推荐 CSS 方案，因为语义更规范，维护方便，实体空格适合临时小间距场景，不同方案在兼容性 可维护性 语义上都有差别，需要根据页面排版需求选择合适的 web 空格写法。

一 基础原理 浏览器空白折叠规则

HTML 解析的时候，源码里连续的空格 换行 制表符，浏览器都会压缩合并成一个普通半角空格，这是 HTML 默认解析规则，所以直接在标签中间敲多个空格键，最终页面只会渲染出一个空格，这就是 web 空格最核心的特点，也是很多人疑惑为什么多敲空格不生效的根本原因。

二 主流 web 空格实现方案对比表格

三 方案一 不换行空格实体写法

这是 web 开发最常用的 web 空格写法，全称 non breaking space，也就是 nbsp，它的作用就是强制保留空格，并且这个位置文字不会自动换行。

操作要点

1 在 HTML 标签内部，需要空格的位置输入 nbsp，前面加上 & 后面加上分号

2 想要多个连续空格，就重复写多个 nbsp

3 特点，这个空格不会被浏览器折叠，文字遇到这个空格的时候，不会在这里断行，适合英文词组之间，避免单词被拆成两行。

注意事项，不要大批量堆砌 nbsp 做大段排版，长期维护很麻烦，属于临时方案，正式项目优先 CSS。

四 方案二 全角空格和半角空格实体

emsp 全角空格，宽度等于一个中文字符，中文标题 中文段落排版经常使用，适合中文之间大间隔。

ensp 半角空格，宽度是半个汉字，适合中等间隔。

这两个同样属于 HTML 实体字符，同样可以实现 web 空格，但是日常使用频率低于 nbsp。

五 方案三 CSS 实现文字间距 推荐正式项目

正式 web 项目排版，不推荐大量使用实体空格，优先使用 CSS 属性控制间距

letter spacing 字符间距，作用是给每个字符之间增加统一距离，适合标题 标签文字整体拉开字距

word spacing 单词间距，只针对英文单词之间的空格生效，专门调整英文单词间隔

text indent 首行缩进，段落首行空两格，中文文章最常用，比敲两个全角空格更加规范

代码思路，在样式表里面给对应标签设置属性值，单位一般用 px rem，页面渲染的时候自动计算间距，不需要在 HTML 源码插入 web 空格字符，后期调整间距只需要修改 CSS 数值，不用改动 HTML 内容。

六 键盘直接输入空格与特殊场景

普通输入框 富文本编辑器，直接按键盘空格键就可以打出 web 空格，这种场景不受 HTML 折叠规则影响，因为是用户输入内容，不是源码渲染。

如果是代码编辑器 WebStorm VS Code 里面写 HTML，敲空格键是源码层面空格，浏览器解析依旧会执行空白折叠。

如果需要在代码里面保留源码原有空格排版，可以使用 pre 标签，pre 标签里面的空格换行都会原样显示，不会折叠，适合展示代码片段。

七 常见误区

误区 1 只要多敲几个空格键，页面就会出现多个空格，忽略浏览器空白折叠规则

误区 2 nbsp 可以无限大量使用做大排版，造成 HTML 源码臃肿，不利于后期维护

误区 3 letter spacing 就是插入 web 空格，它是给所有字符统一增加间距，和单独插入空格不是同一个概念

误区 4 pre 标签可以随便用来做正文排版，pre 会保留原始换行，不适合普通段落，只适合代码展示

【常见问题】

问题 1 web 空格里面 nbsp 为什么文字不会换行

回答 1 web 空格 nbsp 属于不换行空格实体，浏览器识别这个 web 空格的时候，会把两侧文字当成一个不可拆分整体，不会在这个位置自动断行，如果希望词组保持在同一行，就可以使用这个 web 空格写法。

问题 2 web 空格连续写多个 nbsp 会不会有性能问题

回答 1 web 空格少量使用 nbsp 不会有明显性能问题，但是如果页面大量堆砌 nbsp 实现排版，会增加 HTML 代码体积，浏览器解析时间变长，正式项目实现 web 空格推荐改用 CSS 字间距方案，减少实体空格使用。

问题 3 web 空格中文首行空两格用 nbsp 好还是 text indent 好

回答 1 web 空格中文首行空两格，临时测试可以用两个全角 web 空格，正式页面推荐 text indent 首行缩进，这个 web 空格替代方案维护性更好，响应式适配的时候不会出现错位。

问题 4 web 空格 pre 标签里面的空格为什么不会被合并

回答 1 web 空格在 pre 标签里面可以原样保留，因为 pre 标签默认保留源码空白字符，关闭了浏览器空白折叠，适合展示代码，如果普通页面想要保留 web 空格，不建议使用 pre 标签，会带来多余换行样式。

问题 5 web 空格全角空格 emsp 和普通半角空格宽度有什么区别

回答 1 web 空格 emsp 也就是全角空格，宽度等于一个汉字，普通半角 web 空格宽度比较窄，中文排版如果需要大间隔，优先选择 emsp，英文小间隔使用普通半角 web 空格或者 nbsp。

【免责申明】

本文介绍 web 空格相关 HTML 实体与 CSS 排版写法，不同浏览器对实体字符渲染宽度存在细微差异，HTML 规范和 CSS 属性会随标准更新，页面最终显示效果还会受到字体 缩放 响应式布局影响，本文仅作为前端学习参考，不代表所有浏览器渲染结果完全一致。