inline-block元素间4px间隙源于HTML解析器将标签间空白符转为文本节点，其宽为父元素font-size的0.25em；可用font-size:0+重置、flex布局或HTML注释法消除。
为什么 inline-block 元素间总有 4px 间隙
这不是 CSS 写错了，也不是浏览器 bug。HTML 解析器会把源码中标签之间的换行符、空格、制表符当成一个文本节点，内容就是那个“空格”。这个空格的宽度 = 父容器 font-size 的 0.25em（常见为 16px 时 ≈ 4px）。它只影响 display: inline 或 inline-block 的元素，对 block、flex、grid 完全无效。
font-size: 0 是最稳的现场急救法
核心逻辑是让父容器“看不见”那个空格：设 font-size: 0，空格就没了物理宽度；但子元素文字也会变小或消失，所以必须显式重置。
- 父容器加
font-size: 0，例如.group { font-size: 0; } - 每个子元素单独恢复字号，例如
.group > button, .group > input { font-size: 16px; } - 若子元素含
<input type="number">，部分旧版 Safari 可能 placeholder 不显示，需额外加font-size: inherit或单独声明 - 该方案在 IE8+ 和所有现代浏览器中可靠，不影响可访问性
改用 display: flex 是一劳永逸的解法
放弃 inline-block，直接让父容器走弹性布局，天然无视源码空白，间隙彻底消失，还能用 gap 精确控制间距。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
.group { display: flex; gap: 8px; }—— 无需处理子元素display值，哪怕它们是<span></span>或<img alt="HTML空格间隙的九种经典解决方案" >，flex 会自动按行内方式排列 - 垂直对齐用
align-items: center，比vertical-align: middle更可控 - 兼容性注意：IE10+ 支持，若必须兼容 IE9 及更早版本，不能选此方案
- 旧代码若依赖
vertical-align控制图文基线，要重写为align-self: baseline
HTML 注释法适合不能动 CSS 的场景
当项目限制无法修改样式表，或需要快速 patch 已上线页面时，用 HTML 注释“吃掉”空白字符，零 CSS 成本见效快。
立即学习“前端免费学习笔记（深入）”；
- 写法：
<button>-</button><!-- --><input type="number" value="1"><!-- --><button>+</button> - 注释必须紧贴标签，前后不留空格，否则空格还在
- 结构略显杂乱，长期维护成本略高，但兼容性极好（所有浏览器）
- 注意：不要写成
