HTML中连续空格会被浏览器折叠为单个空格，这是规范定义的“空白符折叠”行为；需用 、white-space等方案按语义合理处理空白。

HTML 里直接敲空格，页面上大概率只显示一个空格——不是你键盘没按对，是浏览器默认把连续空白符（空格、制表、换行）合并成单个空格渲染。

为什么普通空格不生效

这是 HTML 的规范行为，叫“空白符折叠”（whitespace collapsing）。不管你在源码里敲 10 个  、5 个空格、还是回车加缩进，浏览器解析时都会先压缩成一个空格再渲染。

所以想保留多个空格或强制换行，不能靠键盘空格堆砌。

•   是最常用方案，代表“不间断空格”，浏览器不会把它和其他空白合并，也不会在它位置折行
• 但   是字符实体，不是“空格键的加强版”，每个   都得手动写，写多了源码难读
• 它不响应 CSS 的 white-space 控制，比如设了 white-space: normal 也照常显示

什么时候该用  ，什么时候不该用

  真正适合的场景其实很窄：需要“这里必须有个不可折叠、不可换行的空白”的语义场合。

立即学习“前端免费学习笔记（深入）”；

Wechat HTML Publisher

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

下载

• 中文排版中防止标点悬挂（如「第 1 章」避免「第」和「1」被断开）
• 金额/单位紧邻（如「¥ 199」防止货币符号和数字分到两行）
• 表格内单元格对齐微调（但更推荐用 text-align 或 padding）
• 别用它来实现缩进、段落间距或布局对齐——那是 CSS 的事，用 margin、padding、text-indent 更可靠、可维护

替代   的现代方案

多数“想多打几个空格”的需求，其实有更好的解法：

• 用 white-space: pre 或 pre-wrap 包裹文本容器，源码里的空格、换行全保留（适合代码块、诗歌、地址等）
• 用 text-indent 实现首行缩进（如中文段落习惯的 2 字符缩进）
• 用 letter-spacing 或 word-spacing 调整字距词距（注意会影响整个元素，非局部）
• 用 margin-left 或 padding-left 做左侧留白（比一堆   清晰得多）

例如：

<p style="white-space: pre-wrap">姓名： 张三</p>

—— 这里的两个空格会被原样显示。

  的常见错误用法

这些写法看着省事，实际埋坑：

• 写成  （多了一个 &）→ 浏览器当纯文本显示，页面出现字面 “ ”
• 在 <button> 或 <a> 里塞一堆   对齐文字 → 按钮宽度异常、可访问性下降（屏幕阅读器会念出“不间断空格”）
• 用   模拟 margin，结果响应式下错位 → 它是内容尺寸，不受盒模型控制
• 混淆   和  / （它们是不同宽度的空格字符，但兼容性和语义更弱，一般不用）

真正要留白，就交给 CSS；真要防断行，才考虑  。别让空格变成样式调试的第一怀疑对象。