应使用 HTML 实体   保留可见空格，因其是 Unicode 不换行空格字符（U+00A0），浏览器视作可显示内容而不合并；普通空格（U+0020）属空白字符，按规范被折叠。

HTML里空格被合并，怎么用 保留可见空格

浏览器默认会把连续的空白字符（空格、换行、制表符）压缩成一个空格，所以直接敲多个空格键没用。想强制显示一个空格，得用 HTML 实体  ——它代表“不换行空格”，渲染后就是不可折叠的空白。

常见错误是写成 &nbsp（少分号）或   放在标签外导致结构错乱；还有人误以为   或   更“标准”，其实它们宽度不固定，且部分旧环境支持差。

•   是最稳妥的选择，宽度约等于一个西文字母，语义明确，所有浏览器都支持
• 别在
  标签内部靠堆   模拟缩进，该用 CSS 的 text-indent 就用 CSS
• 如果需要多个连续空格（比如对齐文本），优先考虑
  或 white-space: pre，而不是塞一堆  

为什么 能保持间隙而普通空格不能

因为   是一个“字符级”的 Unicode 字符（U+00A0），和字母、数字一样属于“可显示内容”，浏览器不会把它当作空白符合并。而普通空格（U+0020）属于“空白字符”，HTML 规范要求解析器必须折叠连续空白。

这跟 CSS 的 white-space 属性无关——即使设成 normal，  依然有效；反过来，就算设了 white-space: pre，普通空格也不会“变多”，只是换行和缩进被保留。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• 本质区别：普通空格是“布局控制符”，  是“内容字符”
• 用 DevTools 查看 DOM，能看到   渲染后对应一个实际的文本节点，而连续空格只留下一个
• 屏幕阅读器通常会把   读作“空格”，不影响可访问性

替代方案对比：pre、CSS、其他实体

不是所有空格问题都该用  。用错场景反而让 HTML 变臃肿、难维护。

• 标签：适合代码块、ASCII 图等需要完全保留空白和换行的场景，但自带上下外边距和等宽字体，需重置样式
• CSS white-space: pre 或 pre-wrap：更灵活，适用于整段文本，但不解决单个位置的微调需求
•  （窄空格）、 （全角空格）：宽度依赖字体，中文下可能比英文宽一倍，移动端易错位，不推荐用于基础排版
• 零宽空格 ​：不可见，不能用来“占位”，只用于断字控制，别误用

容易忽略的细节： 和换行、SEO、可访问性

  看似简单，但在真实项目中常因细节翻车。比如在按钮文字里加   做间隔，结果导致点击热区变小；或者在标题里滥用，让搜索引擎抓取到异常空白词。

• 不要在语义化标签（如
  、）中靠   对齐文字，改用 Flex 或 padding
• 服务端模板（如 Jinja、Twig）里拼接字符串时，注意   是字符串，不是 HTML 实体，要确保最终输出的是未转义的  
• 用 JavaScript 动态插入时，element.textContent = ' ' 不会生效，得用 innerHTML 或 document.createTextNode('\u00a0')

真正需要手动插空格的地方其实不多，多数时候是 CSS 没用对，或者结构本身不合理。先想清楚“为什么这里必须空格”，再决定用不用  。

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