先检查开发者工具中元素的display是否为inline/inline-block且margin/padding/border均为0，再删源码换行空格验证间隙是否消失；若消失即为空白字符所致，否则需排查line-height、vertical-align等CSS属性。
怎么确认页面上那个“空隙”真是空白字符导致的
先别急着加 font-size: 0 或删换行，打开浏览器开发者工具，选中出问题的元素，在 Elements 面板里往上逐级看父容器的 computed 样式，重点查：display 值是不是 inline 或 inline-block；再点开该元素的“Layout”或“Box Model”标签页，看 margin/padding/border 是否真为 0 —— 如果都是 0 却还有间隙，基本就是空白文本节点在作祟。
更直接的办法：在 Elements 面板里手动删掉两个相邻元素之间的换行和空格（比如把 <button></button>\n<input> 改成 <button></button><input>），刷新预览。间隙消失 → 就是 HTML 源码空白导致的；没变化 → 得去查 CSS 的 line-height、vertical-align 或字体度量问题。
用 JavaScript 动态生成时为什么没间隙
因为 JS 拼接字符串时默认不带换行或空格，比如 html(`<span>a</span><span>b</span>`) 生成的 DOM 中，两个 <span></span> 之间根本没有文本节点；而静态 HTML 写成多行后，解析器会把换行符转成一个空格文本节点，只要父容器是 inline 级，这个空格就会被渲染为约 4px 宽度（取决于 font-size）。
验证方式很简单：
立即学习“前端免费学习笔记（深入）”；
- 在控制台执行
document.querySelector('.container').childNodes，看返回的 NodeList 里有没有Node.TEXT_NODE类型的项，且nodeValue是空格或换行符 - 对动态插入的容器也跑一遍，对比子节点数量和类型
注意：用 innerHTML += 拼接多行字符串，其实也会引入空白节点，跟静态写法一样危险。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
white-space: pre-wrap 能不能解决布局间隙
不能。它只影响元素**内部文本流**的空白处理，对元素之间的空白文本节点完全无效。给一个 <div> 加 <code>white-space: pre-wrap，里面写 hello world 会保留四个空格，但 <div>A</div>\n<div>B</div> 之间的换行依然会产生间隙（因为那是两个块级元素间的文本节点，不是 <div> 内部的内容）。
<p>真正起作用的是容器级样式：</p>
<ul>
<li>
<code>font-size: 0：压制空白文本节点的渲染宽度（最通用）
display: flex; gap: 8px：绕过空白节点，用 Flex 布局原生间距（推荐新项目）display: grid; gap: 8px：同上，适合二维排列别试图用 white-space 治标，它根本不在同一作用域。
测试时容易忽略的兼容性细节
Chrome 会强制最小字体大小（通常 12px），所以 font-size: 0 在某些旧版本里可能失效；Safari 对 letter-spacing: -4px 的负值支持不稳定；IE11 下 gap 完全不识别，必须降级到 margin 手动计算。
真正可靠的跨浏览器验证方式：
- 在不同浏览器里打开同一个页面，用
getBoundingClientRect()测量相邻元素的left值差，确认是否稳定为 0 - 禁用所有 CSS，只留 HTML 结构，观察间隙是否还在 → 判断是 HTML 还是 CSS 问题
- 用
document.body.innerHTML = document.body.innerHTML.replace(/\s+/g, ' ')临时清洗整个页面空白，看间隙是否统一消失
最易被忽略的一点：间隙宽度随父容器 font-size 变化，不是固定像素值。测的时候别只盯着一个字号看。
