html中空格被自动合并是规范行为；少量空格用 ，大量保留空白用white-space css属性或标签，语义化优先。
空格被浏览器自动合并怎么办
HTML 默认会把连续的空白字符（空格、制表符、换行）压缩成单个空格，这是规范行为，不是 bug。所以写 或直接敲多个空格，页面上都只显示一个空格。
适合少量固定空格
当只需要插入 1–3 个不可折行的空格时， 最直接。它代表 non-breaking space，浏览器不会把它当普通空白处理，也不会在它位置换行。
例如：<p>姓名： 张三</p> 会在“：”后显示三个紧凑空格。但别滥用——写十个 不仅难维护，语义也错乱（空格不是内容，而是排版意图）。
用 white-space CSS 控制整块文本的空白处理
真正需要保留原始空格缩进（比如代码片段、诗歌、对齐文本），应该用 CSS 的 white-space 属性，而不是堆 。
常用值和效果：
-
white-space: pre—— 保留空格和换行，但不自动换行（超出容器也不折） -
white-space: pre-wrap—— 保留空格和换行，且允许自动换行（最常用） -
white-space: pre-line—— 合并连续空格，但保留换行
示例：<pre class="brush:php;toolbar:false;" style="white-space: pre-wrap"> 第一行有2个空格 <br> 第二行有4个空格</pre>
用 <pre class="brush:php;toolbar:false;"></pre> 标签快速启用预格式化
<pre class="brush:php;toolbar:false;"></pre> 是语义化标签，浏览器默认对其应用 white-space: pre，所以里面所有空格、缩进、换行都会原样显示。
注意两点：
- 它自带上下外边距和等宽字体，如需取消或调整，得额外加 CSS
- 如果内容来自用户输入或 CMS，要防 XSS，得先做 HTML 转义（比如把
变成 <code><），否则<pre class="brush:php;toolbar:false;"><script>...</script></pre>会执行脚本
简单场景下，<pre class="brush:php;toolbar:false;">foo bar</pre> 比写一堆 清晰得多。
真正麻烦的不是“怎么让空格显示”，而是没想清楚：这些空格是内容的一部分（比如代码缩进），还是纯视觉对齐需求（比如表格式布局）。前者用 white-space 或 <pre class="brush:php;toolbar:false;"></pre>，后者该用 CSS flex/grid 对齐，而不是靠空格硬撑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
