HTML默认折叠连续空格是规范行为；用 可精确控制空格数量；white-space属性适合批量保留空格与换行；仅适用于需预格式化的语义场景。

为什么直接敲空格键没用

HTML 默认会把连续的普通空格、制表符、换行符全部“折叠”成一个空格，这是规范行为，不是 bug。比如你在 <p></p> 里写 hello   world（中间三个空格），浏览器照样只显示一个空格间距。

用   实现可控空格数量

这是最常用也最稳妥的方式：  是不换行空格实体，每个都独立存在、不会被合并，也不会在词尾断开。

• 要插 2 个空格，就写   
• 要插 4 个空格对齐某处，就写     
•   不能写在属性值里当分隔符，比如 <div class="a   b"> 会出错 <li>它宽度固定，约等于一个 ASCII 字符宽度，中文排版时可能略窄</li> <h3>用 <code>white-space CSS 属性批量保留原始空格

  适合整段文本需要保持源码空格格式的场景，比如日志、诗歌、代码片段。

  • 给容器加 style="white-space: pre;"：保留所有空格和换行，且不自动换行
  • 用 white-space: pre-wrap;：保留空格和换行，但允许长行自动折行
  • 注意：该样式会影响整个元素内所有文本，包括换行符，不是只针对空格
  • 字体默认变成等宽（如 monospace），需额外用 font-family 覆盖

  别乱用 <pre class="brush:php;toolbar:false;">&lt;/code&gt; 标签除非真需要预格式化&lt;/H3&gt; &lt;p&gt;&lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;/code&gt; 确实能原样保留空格和换行，但它自带语义和样式副作用：&lt;/p&gt;&lt;div class=&quot;aritcle_card flexRow&quot;&gt; &lt;div class=&quot;artcardd flexRow&quot;&gt; &lt;a class=&quot;aritcle_card_img&quot; href=&quot;/xiazai/skill11445&quot; title=&quot;使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审&quot;&gt;&lt;img src=&quot;https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg&quot; alt=&quot;使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审&quot; &gt;&lt;/a&gt; &lt;div class=&quot;aritcle_card_info flexColumn&quot;&gt; &lt;a href=&quot;/xiazai/skill11445&quot; title=&quot;使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审&quot;&gt;使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审&lt;/a&gt; &lt;p&gt;使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。&lt;/p&gt; &lt;/div&gt; &lt;a href=&quot;/xiazai/skill11445&quot; title=&quot;使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审&quot; class=&quot;aritcle_card_btn flexRow flexcenter&quot;&gt;&lt;b&gt;&lt;/b&gt;&lt;span&gt;下载&lt;/span&gt; &lt;/a&gt; &lt;/div&gt; &lt;/div&gt;&lt;p&gt;&lt;span&gt;立即学习&lt;/span&gt;“&lt;a href=&quot;https://pan.quark.cn/s/cb6835dc7db1&quot; style=&quot;text-decoration: underline !important; color: blue; font-weight: bolder;&quot; rel=&quot;nofollow&quot; target=&quot;_blank&quot;&gt;前端免费学习笔记（深入）&lt;/a&gt;”；&lt;/p&gt; &lt;ul&gt; &lt;li&gt;默认用等宽字体，且 &lt;code&gt;margin&lt;/code&gt; 和 &lt;code&gt;white-space&lt;/code&gt; 都已设好&lt;/li&gt; &lt;li&gt;如果只是想在普通段落里多塞两个空格，套个 &lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;/code&gt; 反而破坏语义和样式一致性&lt;/li&gt; &lt;li&gt;嵌套使用（比如 &lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;p&gt;...&lt;/p&gt;</pre>）会导致布局异常，<pre class="brush:php;toolbar:false;"></pre> 不该包裹块级元素

• 真正适合它的场景是：终端输出、JSON 示例、缩进明显的伪代码

最容易被忽略的一点是：空格效果从来不是孤立存在的——  解决的是字符级占位，white-space 控制的是文本渲染规则，而 <pre class="brush:php;toolbar:false;"></pre> 是语义+样式双重绑定。选哪个，取决于你到底想“控制空格”，还是“保留格式”。