HTML5中多个空格默认被合并，可用四种方法原样显示：一、用 实体替代空格；二、用CSS white-space:pre-wrap属性；三、用<pre>标签包裹；四、用letter-spacing或margin模拟间距。
如果您在HTML5中直接输入多个空格，浏览器默认会将其合并为一个空格显示。这是因为HTML解析器遵循空白字符折叠规则。以下是实现多个空格原样显示的多种方法：
一、使用 实体字符
该方法通过插入不间断空格（non-breaking space）实体，逐个替代普通空格，从而绕过浏览器的空白折叠机制。
1、在需要保留多个空格的位置，将每个空格替换为 。
2、例如：<p>姓名： 张三</p>会在“姓名：”后显示三个连续空格。
立即学习“前端免费学习笔记（深入）”；
3、注意：必须使用 而非直接输入空格，且每个空格需单独替换。
二、使用CSS white-space属性
该方法通过修改元素的空白处理行为，使浏览器保留所有空格、制表符和换行符，并按源码格式渲染。
1、为需要保留空格的HTML元素添加内联样式：style="white-space: pre;"。
2、或在CSS中定义类：.preserve { white-space: pre; }，然后在HTML中应用：<p class="preserve">姓名： 张三</p>。
3、可选值包括pre、pre-wrap和pre-line；推荐使用pre-wrap，它既保留空格又允许自动换行。
三、使用<pre>标签包裹内容
<pre>是HTML原生预格式化文本标签，其默认样式即启用white-space: pre，且保留所有空白字符。
1、将含多空格的文本放入<pre></pre>标签内，如：<pre>姓名： 张三</pre>。
2、若需控制字体或行高，可额外添加CSS，例如：pre { font-family: sans-serif; line-height: 1.4; }。
3、注意：pre标签会默认使用等宽字体并禁用文字自动换行，需手动调整以适配页面设计。
四、使用CSS letter-spacing与margin组合模拟
当仅需视觉上拉开字符间距（非严格保留空格字符），可通过控制字距或外边距实现类似效果。
1、对目标文本设置letter-spacing，如：style="letter-spacing: 12px;"。
2、或为特定字符后的空格添加margin-right，例如用包裹空格：<span style="margin-right: 10px;"> </span>。
3、注意：此法不改变HTML空格结构，仅影响渲染外观，不适合需精确空格计数的场景。
