HTML 空白字符导致间隙的判断方法是：在开发者工具 Elements 面板中悬停子元素间空白处，若光标呈 I 形或点击高亮出 #text 节点，即为源码换行/空格解析所致。

怎么判断间隙是不是 HTML 空白字符导致的

先别急着改 CSS 或删换行，打开浏览器开发者工具，选中出问题的容器元素，切换到 Elements 面板，把鼠标悬停在子元素之间的空白处——如果光标变成文本选择态（I 形），或点击后高亮出一个 #text 节点，那基本就是 HTML 源码里的换行/空格被解析成文本节点了。

常见触发场景： 和 并排、 连续写、

多行罗列、display: inline-block 的

。

• 块级元素（如
  ）默认不产生这种间隙，除非显式设了 display: inline 或 inline-block
• 是 inline 元素，和它前后相邻的文本或 inline 元素之间也受此规则影响
• 用 flex 或 grid 布局的容器完全绕过该问题，因为空白文本节点不参与 flex/grid 排列

为什么 jQuery 动态插入没间隙，手写 HTML 却有

动态插入时，如果你用的是 .html() 直接塞一串紧凑字符串（比如 `-+`），中间没换行没空格，浏览器解析后不会生成 #text 节点；但手写 HTML 时，为了可读性加的缩进和换行，全被当成有效空白字符处理了。

注意两个易错点：

• 用 $().append() 或 appendTo() 插入多行字符串，jQuery 会先解析为 DOM，但不同版本对空白的规范化行为不一致，结果可能不稳定
• 即使你用模板字符串写了单行，如果变量拼接时漏了引号或用了 + 换行拼接（如 '' + '-'），JS 本身换行会被当作文本保留
• 服务端渲染（如 PHP/Node 输出 HTML）若模板引擎自动加了缩进，也会带入空白

font-size: 0 方案的实际限制

设父容器 font-size: 0 确实能“吃掉”空白间隙，但它不是银弹——所有继承该字号的子内容（包括 placeholder、alt 文本、伪元素 ::before/::after）都会变小或不可见。


DeepBI DHTML 页面生成器
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
下载

必须手动恢复关键子元素的字号，且要注意层级：

• 的内部数字、上下箭头不受影响，但 placeholder 需要单独设 font-size
• 如果子元素里还有嵌套的 inline 元素（比如 OK），只给 设字号不够， 也要设
• 用 rem 或 em 的项目里，font-size: 0 可能意外重置整条继承链，建议优先用 px

真正可靠的源头控制方式

与其后期补救，不如从 HTML 构建阶段掐断空白来源。三种可落地的做法：

• 静态 HTML：把相关片段写成单行（如
  -+
  ），用编辑器插件（如 Prettier 的 htmlWhitespaceSensitivity: "ignore"）避免格式化破坏
• 模板引擎（如 EJS、Nunjucks）：用注释隔断法 —— -+，注释不生成文本节点
• 构建工具（如 Webpack/Vite）：加 HTML 压缩插件（html-minifier-terser），配置 collapseWhitespace: true 和 removeComments: true，但注意别误删开发用的条件注释

最麻烦但最彻底的，是把这类 UI 组合封装成自定义元素（），内部用 Shadow DOM 隔离样式与结构，空白字符根本进不去。