html解析器默认将连续空白字符折叠为单个空格，这是规范行为而非bug；可用 、white-space css属性或标签按需解决。
为什么直接敲空格键没用
HTML 解析器默认会把连续的空白字符（空格、制表符、换行）合并成一个空格，这叫“空白折叠”（whitespace collapsing）。你写 <p>hello world</p>，浏览器只渲染一个空格。这不是 bug，是规范行为——HTML 关注语义结构，不是排版细节。
用 实现可控空格
每个 渲染为一个不可断行空格，不会被折叠，也不会在行尾换行。适合小范围、确定数量的空格插入。
- 要插 3 个空格：写
- 不能写在属性值里，比如
<div class="box "> 会解析失败 <li>大量使用会让 HTML 可读性变差，且语义不清（它本意是“防换行”，不是“加间距”）</li> <li>全角空格 <code>（≈1汉字宽）、半角空格 -
white-space: pre：完全保留空格和换行，但不自动换行（类似<pre class="brush:php;toolbar:false;"></pre>标签） -
white-space: pre-wrap：保留空格和换行，且允许长行自动折行（最常用） -
white-space: pre-line：合并连续空格，但保留换行符（换行有效，空格仍会被压成一个） - 别用
normal（默认值）或nowrap——前者不解决问题，后者可能撑破容器 - 适合代码片段、ASCII 图、日志输出等需要原样呈现的文本
- 如果不想用等宽字体，加 CSS 覆盖：
pre { font-family: inherit; } - 不要为了加几个空格就套
<pre class="brush:php;toolbar:false;"></pre>——它改变了语义，也影响可访问性和 SEO - 嵌套内联元素（如
<span></span>）在<pre class="brush:php;toolbar:false;"></pre>里依然生效，空格照常保留
用 white-space CSS 属性批量控制
对整段文本统一处理更干净，尤其适合代码块、诗歌、对齐文本等场景。关键取值：
示例：<p style="white-space: pre-wrap;">hello world</p> 会显示 5 个空格。
什么时候该用 <pre class="brush:php;toolbar:false;"></pre> 标签
<pre class="brush:php;toolbar:false;"></pre> 是语义化方案，告诉浏览器“这段内容的格式就是它的意义”。它自带 white-space: pre 行为，且默认用等宽字体。
真正容易被忽略的是语义与表现的混淆：用 做布局对齐，后期维护成本高；用 white-space 却忘了响应式下换行是否合理；<pre class="brush:php;toolbar:false;"></pre> 被滥用导致字体、行高失控。选哪种，得看你要解决的是“一个词间的间隙”，还是“一段文本的格式”。
