HTML元素间空隙是规范行为，源于inline/inline-block元素源码换行产生的空格文本节点；font-size:0可消除该间隙，flex+gap则是现代语义化替代方案。

HTML 元素间的“空格间隙”不是 bug，是规范行为；它只对 inline 和 inline-block 元素生效，且完全由源码中的换行/缩进触发——块级元素之间换行不会产生间隙。

为什么 button 和 input 之间总有 4px 空隙

因为 button 默认是 inline-block，input 默认是 inline，它们同属行内格式化上下文。当 HTML 源码写成多行时：

• -
• +

换行符会被解析为一个文本节点，内容就是一个空格；这个空格的宽度 ≈ 当前父容器 font-size 的 0.25 倍（比如 font-size: 16px → 空隙约 4px）。

常见错误现象：开发者工具里看 DOM 是干净的，但视觉上就是多了一道缝；用 margin-left: -4px 硬调？治标不治本，换字体或缩放就失效。

font-size: 0 是最稳的消除方案

它不改结构、不依赖 JS、兼容 IE11+，原理是让那个“空格字符”失去渲染宽度，而子元素自己重设 font-size 后文字照常显示。

• 给父容器加 font-size: 0（比如
  ）
• 所有直系子元素（button、input、span 等）显式设置 font-size，如 14px 或 1rem
• 可顺手加 vertical-align: middle 避免基线对齐错位
• input[type="number"] 的 placeholder 不受影响，无需额外 hack

别对 或 设 font-size: 0，否则全局文字消失。


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

Flex + gap 是语义更清晰的现代替代

如果你能放弃 IE，display: flex 配合 gap 是真正绕过空白解析问题的解法——它根本不读源码里的换行，间隙由 CSS 控制，响应友好，首尾无多余留白。

• 父容器设 display: flex 和 gap: 8px（单位支持 px、em、rem）
• 子元素无需任何 margin，gap 自动作用于相邻项之间
• Safari 14.1+、Chrome 89+、Firefox 63+ 均已稳定支持
• 若需兼容 Safari ≤14，可用 justify-content: space-between + 单独控制首尾 margin

注意：gap 对 grid 同样有效，但对普通 inline 流无效，必须用 flex 或 grid 容器。

动态插入时字符串不能含换行

用 element.innerHTML = '...' 或 jQuery 的 .html() 插入时，如果模板字符串里有 \n 或缩进，照样生成空格文本节点——浏览器照常解析那段 HTML 字符串。

• ✅ 正确写法：`-+`（紧凑连写）
• ❌ 错误写法：`-\n\n+`（\n 就是间隙来源）
• jQuery 的 $().appendTo() 行为不稳定，不同版本对空白处理不一致，优先用 .html() + 紧凑字符串

最容易被忽略的一点：这个问题从来不是“怎么让空格变大”，而是“怎么让浏览器别把换行当空格”。只要记住源码空白只影响 inline 级元素，其他都是干扰项。