HTML中空格会塌陷是因为浏览器按规范将连续空白字符合并为一个空格；可用white-space、font-family:monospace、删空白节点或flex/grid布局等方案控制。
HTML中空格为什么会塌陷
浏览器默认会把连续的空白字符（空格、换行、制表符）合并成一个空格显示，这是HTML规范定义的“空白处理规则”，不是bug。所以写在源码里的换行和缩进，几乎不会影响渲染结果。
常见现象：A B 渲染出间隙，但实际只是单个空格；而 AB 紧挨着写，才真正无间隙。
用 white-space: pre 或 pre-wrap 强制保留所有空格
适用于需要精确控制文本内空格/换行的场景（如代码块、ASCII艺术、对齐文本），但不推荐用于普通布局——它会让文字不自动换行，破坏响应式。
-
white-space: pre：保留空格和换行，不自动折行 -
white-space: pre-wrap：保留空格和换行，允许折行（更实用） - 注意：该样式作用于容器元素，子元素内的HTML结构仍受解析规则影响
用 font-family: monospace 配合 white-space 控制等宽间隙
当你要让多个内联元素（比如图标+文字）之间保持固定、可预测的间距时，单纯靠空格不可靠。等宽字体配合 white-space: pre 能让每个空格占相同像素宽度，便于微调。
示例：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
<div style="white-space: pre; font-family: monospace;"> A B C </div>
此时中间两个空格会严格渲染为两个等宽空隙，而不是被压缩。
真正可靠的“去空格”方案是删掉HTML中的空白节点
最彻底的方法不是靠CSS压制，而是不让空格进入DOM——移除标签间的换行与缩进，或用注释“桥接”标签：
- 直接连写：
ABC - 用HTML注释消除间隙：
ABC - 服务端模板（如Jinja、EJS）启用“去除空白”选项，或用构建工具（如html-minifier）自动处理
注意：用 display: flex 或 display: grid 布局时，空白字符对子项间距完全无影响——这是现代布局规避该问题的首选路径。
最容易被忽略的是：即使用了 white-space，如果父容器设置了 font-size: 0 再在子元素里重设字号，也能消灭间隙，但会带来可访问性和维护性代价。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
