浏览器默认压缩连续空格、制表符、换行符为一个空格，是html规范强制行为；需用 实体或white-space: pre-wrap等css属性显式保留，仅适用于语义明确的预格式化内容。
浏览器默认把连续空格、制表符、换行全压缩成一个空格，这不是 bug，是 HTML 规范强制要求的行为；想让多个空格可见，必须显式干预——要么用 硬塞，要么用 white-space 控制解析逻辑，<pre class="brush:php;toolbar:false;"></pre> 只是前者的一种快捷但带副作用的写法。
为什么直接敲空格键没用
HTML 解析器在构建 DOM 前就完成了「空白折叠」：所有连续空白字符（空格、\t、\n、\r）被统一替换成单个 U+0020 空格，再丢给渲染引擎。你写 This<space><space><space>is</space></space></space>，最终 DOM 文本节点里只剩一个空格。
- 这个过程发生在解析阶段，和 CSS
margin、font无关 -
- 全角空格（U+3000）虽能显示多个，但语义错乱、中文字体下宽度不稳定，不推荐
什么时候该用 ，什么时候不该用
适合语义明确、数量可控的单点间距，比如单位前、缩写后防断行；但它不是排版工具，堆十个会毁掉可读性和可访问性。
- 正确场景：
<p>文件大小：12.5 MB</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5806" title="html-deploy"><img src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="overflowclass">html-deploy</a> <p class="overflowclass">使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p> </div> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>（防止数字和单位被折到两行） - 错误场景：用
text-align或flex - Vue/React 动态插入时，
textContent会把innerHTML或框架提供的安全插值（如 Vue 的v-html） - 别嵌套写
&必须写成&，否则解析失败
white-space: pre-wrap 是日常最稳的选择
比起一个个塞 ，用 CSS 批量控制更干净。其中 pre-wrap 在保留原始空格/换行的同时允许自动折行，兼顾语义、响应式和可维护性。
-
pre：保留所有空白，但不换行 → 长文本直接溢出容器，慎用 -
pre-wrap：保留空白 + 允许换行 → 大多数富文本、日志、地址字段首选 -
pre-line：合并空格，只保留换行 → 类似普通段落，不解决“连续空格”需求 - 别给整页或长列表加
white-space: pre，会导致文本无法折行，破坏移动端体验
<pre class="brush:php;toolbar:false;"></pre> 不是“加空格”的标签，是预格式化语义容器
<pre class="brush:php;toolbar:false;"></pre> 本质只是 white-space: pre + font-family: monospace 的快捷写法，它表示「这段内容的格式本身就有意义」，比如代码、ASCII 图、机器生成的日志。
- 用在标题或按钮里？语义错误，影响 SEO 和屏幕阅读器理解
- 内容来自用户输入或 API？必须先做 HTML 转义（如
→ <code><），否则可能被解析成标签甚至触发 XSS - 要取消等宽字体？得显式重置：
pre { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } - 想保留格式又不用等宽字体？直接用
<div style="white-space: pre-wrap;"> 更轻量 <p>真正容易被忽略的是上下文：静态文案里 <code>最直觉；动态内容优先走white-space: pre-wrap+textContent安全设值；而<pre class="brush:php;toolbar:false;"></pre>一旦用错语义，后续加样式补救的成本远高于一开始选对方案。
