浏览器合并空白符是html规范行为，需用 、white-space css属性或标签（配合重置样式）实现空格显形，而非滥用空格键；布局间距应优先使用margin/padding等css方案。
浏览器默认会把连续空格、制表符、换行全合并成一个空格，这不是 bug，是 HTML 规范行为；想让空格“显形”，得用对方法，而不是狂敲空格键。
用 插入不可折行空格
这是最常用也最容易误用的方式。 是 non-breaking space，每个都渲染为一个固定宽度、不被合并、也不在行尾断开的空格。
- 要 3 个空格，就得写
- 适合防断行场景：比如
Mr. Smith、金额后加单位¥ 199 - 不适合整段缩进或对齐——语义错误，响应式下易溢出，屏幕阅读器会逐个读出“不间断空格”
- 它和普通空格宽度一致，如需更宽，可用
用 white-space CSS 属性控制空白行为
比起硬塞 ，用 CSS 控制更干净、可维护性高，且能批量生效。
-
white-space: pre-wrap：保留所有空格与换行，但允许自动换行 —— 最常用，适合地址、日志、带缩进的说明文本 -
white-space: pre：完全保留空格+换行，不换行 —— 适合代码块，但内容超宽会触发水平滚动条 -
white-space: pre-line：合并空格，但保留换行符 —— 适合从富文本编辑器粘贴过来的带换行内容 - 别在
<p></p>或<span></span>上滥用pre，它会让字体变成等宽，破坏排版一致性
用 <pre class="brush:php;toolbar:false;"></pre> 标签但必须重置样式
<pre class="brush:php;toolbar:false;"></pre> 确实原样保留空格，但它自带副作用：等宽字体、上下 margin、内容超宽时出现滚动条。
- 必须配合 CSS 重置才可控，例如：
pre { font-family: inherit; white-space: pre-wrap; margin: 0; } - 只用于真正需要“源码级格式保留”的场景：CLI 日志、ASCII 图、缩进敏感的配置示例
- 别用它给按钮文字加空格，或给标题首行缩进——语义错乱，SEO 和无障碍都会受损
- 如果只是想让一段文字里的多个空格显示出来，
white-space: pre-wrap+ 普通<div> 就够了 <h3>别用空格替代布局间距</h3> <p>想让两段文字隔开一点？或者让图标和文字之间留空？这不是空格该干的事。</p> <ul> <li>段落间空隙：用 <code>margin-bottom或padding，不是堆 - 文字内微调间距：优先考虑
letter-spacing（字符级）或word-spacing（英文单词间），中文慎用负值 - 全角空格（ ）虽能绕过合并，但它是 Unicode 字符，语义上等于一个汉字，用多了影响可访问性和搜索索引
- 动态生成内容时，JavaScript 中插入空格建议用
'\u00a0'（即
真正难的不是“怎么让空格显示”，而是判断“该不该用空格来实现”。多数时候，你想要的其实是 margin、padding、text-indent 或 white-space 的组合效果，而不是一堆看不见的 。
