浏览器默认合并连续空格、制表符、换行符为一个空格，是html规范行为而非bug；需用 、标签或white-space css属性精确控制空格显示。
浏览器默认会把连续空格、制表符、换行合并成一个空格，这不是 bug，是 HTML 规范行为；想精确控制空格，得用 、<pre class="brush:php;toolbar:false;"></pre> 或 CSS 的 white-space 属性，而不是靠敲空格键硬凑。
为什么直接敲多个空格没用
HTML 解析器在构建 DOM 时，会对文本节点中的空白字符做“折叠”：连续的空格、Tab、换行全算一个，首尾空白直接丢弃。你写 <p>hello world</p> 和 <p>hello world</p> 渲染效果一样——除非你显式干预。
- 常见错误现象：在
<div> 里敲 5 个空格想对齐文字，结果毫无反应 <li>适用场景：纯内容排版（如诗歌、地址）、代码片段、日志输出</li> <li>不适用场景：仅为了“让两段文字隔开一点”，该用 <code>margin或padding - 性能影响：大量
- 只能替代一个空格，要 3 个就得写
- 它不会被合并，也不会在行尾断开，但也不支持响应式换行
- 不能用于整段缩进——语义错误，移动端容易溢出容器
- 和
white-space: nowrap不同：nowrap作用于整个元素 - 默认用等宽字体，需加 CSS 重置：例如
pre { font-family: inherit; white-space: pre-wrap; margin: 0; } -
white-space: pre-wrap比纯<pre class="brush:php;toolbar:false;"></pre>更实用：保留空白，又允许自动换行 - 别把它当“万能空格工具”塞进按钮或标题里——破坏语义，影响 SEO 和无障碍访问
- DOM 中仍生成真实空白字符，可被 JS 读取，但复制粘贴时也会带进去
-
white-space: pre-wrap：保留所有空白（包括换行），同时允许自动换行（最常用） -
white-space: pre-line：合并连续空格，但保留换行符（适合富文本编辑器输出） -
white-space: break-spaces：空格也能换行（Chrome 83+、Firefox 73+），但兼容性需查 MDN - 不适用于属性值内空格控制（如
class="a b"中的空格由 HTML 解析器处理，CSS 无效）
用 插入不可折行空格
是最轻量的解法，适合单点微调，比如防止“100 kg”被拆成两行。
用 <pre class="brush:php;toolbar:false;"></pre> 保留原始空白格式
<pre class="brush:php;toolbar:false;"></pre> 是预格式化容器，内部所有空格、Tab、换行原样渲染，适合代码块或 ASCII 艺术。
用 CSS white-space 属性统一控制
这是现代、语义清晰、可维护性最高的方式，推荐作为首选。
真正难的是判断场景：要不要保留换行？是否允许折行？是否需要语义正确？选错方案会导致响应式失效、可访问性下降或后期维护困难——比如用一堆 做缩进，换字体后就错位，而 text-indent 或 padding-left 才是正解。
