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 占据宽度——典型表现就是两个 或 并排时出现不可控的横向空隙。
用 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 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- ❌ 错误写法：
`\n\n` - ✅ 正确写法：
``（严格连写，无换行无空格） - ⚠️ 慎用注释隔开：
可以消除间隙，但会让 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 继承异常——它们看着像，但成因和解法完全不同。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
