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; }
• 若子元素含 ，部分旧版 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 值，哪怕它们是 或 ，flex 会自动按行内方式排列
• 垂直对齐用 align-items: center，比 vertical-align: middle 更可控
• 兼容性注意：IE10+ 支持，若必须兼容 IE9 及更早版本，不能选此方案
• 旧代码若依赖 vertical-align 控制图文基线，要重写为 align-self: baseline

HTML 注释法适合不能动 CSS 的场景

当项目限制无法修改样式表，或需要快速 patch 已上线页面时，用 HTML 注释“吃掉”空白字符，零 CSS 成本见效快。

• 写法：-+
• 注释必须紧贴标签，前后不留空格，否则空格还在
• 结构略显杂乱，长期维护成本略高，但兼容性极好（所有浏览器）
• 注意：不要写成

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！