HTML中精确控制空格的方法有五种：一、用 实体；二、用white-space CSS属性；三、用<pre>标签；四、用padding/margin模拟；五、用Unicode空格字符。
如果您在HTML中直接输入空格，浏览器会将其自动合并为单个空格。以下是实现HTML中精确空格控制的多种方法：
一、使用 实体字符
该方法通过插入不换行空格（Non-breaking Space）实体，强制浏览器保留空格且不换行。每个 对应一个不可折叠的空格。
1、在需要插入空格的位置，输入<span> </span>代码。
2、若需连续三个空格，则写入 。
立即学习“前端免费学习笔记（深入）”；
3、注意： 不能被CSS的white-space: nowrap以外的属性压缩，适用于标题缩进、姓名间固定间距等场景。
二、使用white-space CSS属性
该方法通过CSS控制元素内空白符的渲染行为，使空格、制表符和换行符按源码原样显示。
1、为需要保留空格的容器添加style属性，例如：<p style="white-space: pre;">文本 内容</p>。
2、可选值包括pre、pre-wrap、pre-line，其中pre完全保留所有空白符和换行。
3、推荐配合<code>或<pre>标签使用，避免影响段落整体排版流。
三、使用<pre>预格式化标签
<pre>标签默认启用white-space: pre行为，其内部所有空格、制表符和换行均按源码呈现，无需额外CSS。
1、将含空格的文本包裹在<pre></pre>标签内，例如：<pre>姓名： 张三</pre>。
2、如需调整字体或边距，可为<pre>添加自定义样式，例如style="font-family: sans-serif; margin: 0;"。
3、适用于代码片段、诗歌、对齐表格等需严格保留格式的内容。
四、使用padding或margin模拟空格
该方法不依赖空白符本身，而是通过CSS外边距或内边距在元素间制造视觉空隙，更符合语义化原则。
1、为相邻的两个行内元素分别设置margin-right或margin-left，例如：<span style="margin-right: 20px;">左</span><span>右</span>。
2、也可用padding-left作用于后一个元素，实现类似“空格”的间隔效果。
3、适合按钮组、导航项、图标文字组合等需要响应式间距的交互区域。
五、使用Unicode空格字符
除普通空格外，HTML支持多种Unicode空白字符，如全角空格（ ）、细空格（ ）、四分之一空格（ ）等，可提供更精细的宽度控制。
1、在HTML中直接输入 插入一个中文字符宽度的空格。
2、使用 （零宽不连字空格）可实现极窄间隔，常用于字母与数字之间防粘连。
3、需注意不同浏览器对部分Unicode空格的支持程度差异，建议在关键场景做兼容性测试。
