浏览器默认折叠连续空白字符是html规范行为，需用 （不可断行空格）、white-space: pre-wrap等css属性或标签显式保留空格； 适合内联固定空隙，white-space适合整段文本控制，语义明确但非布局工具。
浏览器默认会把连续空格、制表符、换行符全压缩成一个空格，这不是 bug，是 HTML 规范明确规定的空白折叠行为。想让空格按你写的数量和位置显示，必须显式干预。
用 插入不可折叠的空格
这是最直接、兼容性最好的内联方案，适合文字中间需要固定宽度空隙的场景，比如“姓名： 张三”或防止“100 元”被断行。
-
- 要插 3 个空格，就写
- 不适用于属性值内部：例如
<div class="box active"> 无效，class 解析器会把它当两个类名处理 <li>中文排版中慎用过多 <code>对齐，易导致响应式断点错位或屏幕阅读器朗读异常 -
white-space: pre;：完全保留源码空格 + 换行，但强制等宽字体，且不自动换行 —— 适合纯代码展示 -
white-space: pre-wrap;：保留所有空格和换行，同时允许长行在容器边界处折行 —— 推荐用于用户输入预览、配置文件展示 -
white-space: pre-line;：合并连续空格，但保留换行符 —— 适合把带换行的 Markdown 段落转成 HTML 时保持段落结构 - 注意：这些值对子元素不继承，如果子元素是
<span></span>且设置了display: inline-block，它的空白行为由自身white-space决定 - 它本质就是给内部文本自动加了
white-space: pre;和font-family: monospace; - 可配合
<code>使用：<pre class="brush:php;toolbar:false;"><code>for (let i = 0; i </code></pre> - 若要取消等宽字体，必须显式覆盖：
pre { font-family: inherit; }，否则在移动端可能撑破容器 - 不要用
<pre class="brush:php;toolbar:false;"></pre>做布局对齐 —— 它不是为视觉对齐设计的，CSS Grid/Flex 才是正解 - 对齐需求（如价格右对齐、表单项标签统一宽度）应优先用 CSS：
text-align、flex、grid-template-columns、min-width -
letter-spacing和word-spacing是排版微调工具，不是对齐工具 —— 它们影响的是字符/词间距，不是元素定位 - 全角空格
用 white-space 控制整块文本的空白行为
当你有一段含缩进、对齐、多空格的文本（如代码片段、诗歌、日志输出），用 CSS 统一控制比堆 更干净。
用 <pre class="brush:php;toolbar:false;"></pre> 标签快速包裹预格式化内容
不需要写 CSS 类、不依赖外部样式，<pre class="brush:php;toolbar:false;"></pre> 是语义最明确的“我要原样显示”的声明方式。
避免用空格实体做视觉对齐
用一堆 或 去“推”文字对齐，短期有效，长期维护成本高，且在不同字体/缩放/屏幕下表现不稳定。
真正难的不是“怎么让空格显示出来”，而是判断该用哪一层机制：是文本内容本身的空白语义（选 或 white-space），还是布局结构上的位置关系（该用 margin/padding/flex）。混淆这两层，就会陷入“加十个 还是加 margin-left: 20px”的无意义纠结。
