inline-block元素间约4px间隙源于HTML解析器将换行符、空格等空白符渲染为文本节点，其宽度=父容器font-size的0.25em；可用font-size:0+子元素重置字号消除，或改用display:flex+gap布局。

为什么 inline-block 元素间总有约 4px 间隙

这不是 bug，是 HTML 解析器把源码里的换行符、空格、制表符当作一个文本节点渲染的结果。只要父容器没设 font-size: 0，这个文本节点就会按当前 font-size 和 line-height 占据宽度——典型表现就是两个 <button></button> 或 <li> 并排时出现不可控的横向空隙。

用 font-size: 0 是最稳妥的 CSS 方案

它直接让空白文本节点“失去宽度”，不依赖 JS、不破坏语义、兼容所有现代浏览器（包括 IE11）：

• .control-group { font-size: 0; }
• .control-group > * { font-size: 14px; vertical-align: middle; }

注意：vertical-align: middle 能避免因基线对齐导致的垂直错位；如果子元素里有 input[type="number"]，它的 placeholder 文字不会被 font-size: 0 影响，但若用 contenteditable 或自定义伪元素，需单独恢复 font-size。

动态拼接 HTML 时别留空格，但别硬写单行

jQuery 的 .html() 或原生 innerHTML 插入字符串时，只要字符串里含换行或空格，就会复现静态 HTML 的间隙问题：

DeepBI DHTML 页面生成器

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

下载

立即学习“前端免费学习笔记（深入）”；

• ❌ 错误写法：`<button>-</button>\n<input value="1">\n<button>+</button>`
• ✅ 正确写法：`<button>-</button><input value="1"><button>+</button>`（严格连写，无换行无空格）
• ⚠️ 慎用注释隔开：<!-- --> 可以消除间隙，但会让 DOM 树多出注释节点，调试时干扰大

gap 替代方案只适用于 Flex/Grid 容器

如果你能改布局模型，display: flex + gap 是最干净的解法，完全绕过空白文本节点：

• .flex-group { display: flex; gap: 8px; }
• 它对子元素的 display 类型无要求，inline-block、block、flex 都能生效
• 但老项目若已用大量 inline-block 且父容器无法改 display，就别强行套 gap，反而增加维护成本

真正容易被忽略的是：间隙不是“多打了空格”，而是浏览器在解析 HTML 时把换行当成了真实内容。所以修样式前，先确认你面对的是文本节点间隙，还是块级元素默认 margin、图片 baseline 对齐、或是 line-height 继承异常——它们看着像，但成因和解法完全不同。