html中普通空格被合并为一个，是因规范定义的“空白折叠”行为：连续空格、制表符、换行符在解析阶段即被压缩为单个空格；可用 实现不可折行空格，或css white-space: pre-wrap等属性控制空白显示。
HTML里普通空格为什么会合并成一个
浏览器默认会把连续的空白字符（空格、制表符、换行）压缩成单个空格，这是HTML规范定义的“空白折叠”行为。所以直接敲多个 或连写空格键，页面上只显示一个空格。
用 实现固定数量的空格
是不间断空格实体，它不会被折叠，也不会换行。要显示4个空格，就得写4次： 。适合少量、确定数量的空格场景，比如对齐文字、缩进段落首行。
注意： 属于文本内容，会影响可访问性（屏幕阅读器会读作“不间断空格”），大量堆叠还可能让HTML难以维护。
用white-space CSS属性控制空白处理
更灵活的方式是用CSS控制父容器的white-space行为：
-
white-space: pre：保留所有空白和换行，但不自动换行（类似<pre class="brush:php;toolbar:false;"></pre>） -
white-space: pre-wrap：保留空白和换行，且允许自动换行（最常用） -
white-space: pre-line：合并空格但保留换行
例如：
<p style="white-space: pre-wrap">姓名： 张三</p>——这里
仍起作用，但即使换成普通空格，只要包裹在pre-wrap容器里，多个空格也会原样显示。
用 和 替代固定宽度空格
如果目标是视觉对齐而非语义空格，可以用更语义化的空白字符：
-
-
- 它们比
比如：姓名： 张三比姓名： 张三更清晰，且宽度更稳定（不受字体影响小）。
真正麻烦的是混合中英文排版时的对齐—— 在不同字体下宽度浮动， 又依赖当前font-size，这时候得配合monospace字体或ch单位微调，反而容易掉进新坑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
