HTML中连续空格被浏览器默认合并为一个，需用white-space属性（如pre-wrap）或margin/padding等CSS属性精确控制间距，空格仅适用于防断行、占位等少数语义场景。
HTML里连续空格被合并是默认行为
浏览器会把 HTML 源码中多个连续的 或普通空格字符压缩成一个，这是 HTML 规范定义的“空白符折叠”机制。所以直接敲多个空格键、或写多个 在多数场景下并不能稳定撑开固定间隙——尤其在响应式布局或字体变化时容易失效。
用 white-space CSS 属性控制空白处理
真正可控的方式是改写元素的空白符渲染规则：
-
white-space: pre：保留所有空格和换行，但不自动换行（类似） -
white-space: pre-wrap：保留空格和换行，且允许自动换行（最常用） -
white-space: pre-line：合并连续空格，但保留换行符（适合段落间间隙）
例如：
<span style="white-space: pre-wrap"> 这里两个空格 </span>
—— 两端的两个空格会被真实渲染，且内容仍可折行。
更推荐用 margin 或 padding 控制间隙
用空格“模拟”间距本质是语义错位，实际开发中应优先用盒模型属性：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 相邻元素间固定间隙：用
margin-right或margin-bottom - 文本内需对齐（如表格感排版）：改用
display: inline-block+ 宽度 +text-align - 需要像素级精确：避免依赖空格数量，直接设
margin: 0 8px这类明确值
比如两个按钮之间要 12px 间隙：
<button style="margin-right: 12px">A</button><button>B</button>
只在极少数语义场景下必要
它真正的用途不是“做间隙”，而是“防止换行”或“占位”：
- 防止单词被断行：
C++ Developer - 空单元格显示（表格中避免塌陷）：
- 纯文本环境（如邮件模板）中模拟缩进
一旦你发现要连写三个以上 才“看起来对”，就该停下来检查是否该用 CSS 了——空格不是尺子，margin 才是。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
