浏览器默认压缩连续空格是HTML规范行为，需用 、white-space CSS属性或<pre>标签解决： 适合小范围控制，white-space:pre-wrap推荐用于大段文本，<pre>适合代码等预格式化内容。
浏览器默认会把连续空格（包括制表符、换行）压缩成一个空格，这不是 bug，是 HTML 规范行为。要正常显示多个连续空格，得绕过这个默认折叠机制。
为什么直接敲空格没用
HTML 解析器在渲染前就做了「空白折叠」：所有连续空白字符序列（哪怕混着 \t 和 \n）都被当成一个 处理；首尾空白还被直接丢弃。所以你在源码里写 hello<p> world</p>，页面上只看到 hello world（中间一个空格）。
用 手动插入不可断空格
这是最常用、兼容性最好的方式，适合小范围控制，比如对齐、缩进或单词间加固定空隙：
-
- 要显示 4 个空格，就得写
{4} - 不适用于大段文本——手写太多
- 注意：
title="a b"中的空格仍会被压缩
用 white-space CSS 属性批量控制
适合整块内容（如代码块、日志、表格数据），用样式统一处理空白逻辑：
立即学习“前端免费学习笔记（深入）”；
-
white-space: pre：完全保留空格和换行，行为类似<pre>，但不带等宽字体默认样式 -
white-space: pre-wrap：推荐首选——保留空格和换行，同时允许自动折行，适配响应式布局 -
white-space: pre-line：只保留换行符，空格照常折叠，适合想保留段落结构但不care空格数的场景 - 别乱用
white-space: nowrap：它会禁掉换行，但同样会折叠中间空格，可能让本该分开的词粘连
用 <pre> 标签快速包裹纯文本
适合展示代码、ASCII 图、日志输出这类需要严格格式还原的内容：
-
<pre>hello world</pre>里的空格、缩进、换行全保留 - 默认使用等宽字体，且有上下外边距，若需改样式，得额外重置
font-family和margin - 语义上表示“预格式化文本”，不适合用在普通段落中充作排版工具
- 嵌套内联元素（如
<span>）时，<pre>内的空白仍受其自身规则约束，不是万能容器
真正容易被忽略的是：空格问题往往不是孤立出现的——它常和 inline-block 元素间的 4px 间隙、font-size 继承、甚至父容器的 line-height 互相影响。先确认你面对的是「文本内容空格丢失」还是「布局级空白干扰」，再选对应解法。硬塞 或滥用 white-space: pre 可能掩盖了更深层的结构问题。
