HTML默认合并空白字符，可用 或<pre>标签实现连续空格；CSS的white-space: pre-wrap最常用，<pre>适合代码， 适合对齐。
HTML里空格被合并是默认行为
浏览器渲染HTML时会把多个连续空格、换行、制表符全部压缩成一个空格，这是HTML规范定义的“空白字符折叠”规则。所以直接写 或敲三下空格，页面上只显示一个空格。
用 或<pre class="brush:php;toolbar:false;"></code>实现连续空格</H3>
<p>两种最常用且可靠的方式：</p>
<ul>
<li><code> </code>（不间断空格）：每个<code> </code>渲染为一个不可折行的空格，适合少量空格，比如对齐文字、缩进列表项。例如：<code><span>姓名： 张三</span></code></li>
<li><code><pre></code>标签：保留所有空白和换行，适合代码块、日志、ASCII图等。内容会默认用等宽字体，且不自动换行。例如：<pre class="brush:php;toolbar:false;">function hello() {
console.log("hi"); // 这里的4个空格会被原样显示
}</pre>
<h3>CSS的<code>white-space属性更灵活
如果不想用<pre>但又要保留空格，给容器加CSS即可。关键取值有：
-
white-space: pre;：保留空格和换行，但不自动换行（超出容器就溢出） -
white-space: pre-wrap;：保留空格和换行，且允许自动换行（最常用） -
white-space: pre-line;：合并多余空格，但保留换行符（类似普通段落加换行）
用法示例：<div style="white-space: pre-wrap;">abc def</div> —— 中间三个空格会完整显示。
立即学习“前端免费学习笔记（深入）”；
别用<code>标签强行显示空格
<code>本身不保留空白，它只是语义化标记“这段是代码”，样式上常带等宽字体和背景，但空格依然会被折叠。常见错误写法：<code>foo bar</code> → 实际还是显示foo bar。真要显示空格，得配合white-space或 一起用。
真正需要原样显示空格时，优先考虑white-space: pre-wrap；如果是纯代码片段，直接套<pre><code>组合；手动画对齐就老实用 ——别指望敲空格键能生效。
