inline-block元素间4px间隙源于HTML解析器将换行/空格视作文本节点，宽度为font-size的0.25em；根治法包括父容器设font-size:0并重置子元素字号、改用display:flex布局、或用HTML注释消除空白。
inline-block 元素之间那 4px 左右的间隙，不是 bug，是 HTML 解析器把换行符和空格当成了真实文本节点——它有宽度，宽度 = 父元素 font-size 的 0.25em。设 margin: 0 没用，调 vertical-align 也压不住，得从根源处理。
父容器设 font-size: 0 最快见效
这是上线前最常用来“急救”的方案，兼容性好、逻辑直白：
- 父容器加
font-size: 0（比如.nav { font-size: 0; }），空白字符就没了物理宽度 - 所有子元素必须显式重置字号（比如
.nav a { font-size: 16px; }），否则文字不可见 -
、等表单控件可能继承异常，需单独补font-size - Chrome 有最小字号限制，可加
-webkit-text-size-adjust: none防止回退
改用 display: flex 一劳永逸
放弃 inline-block，直接让父容器走弹性布局，间隙天然消失：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
.nav { display: flex; }后，子元素自动水平排列、无间隙、支持gap精确控制间距 - 子元素不用再写
display: inline-block，写了也无效（flex item 默认是 block-level） - IE10+ 支持；若必须兼容 IE9 或更早，这条路走不通
- 原来靠
vertical-align对齐的逻辑，要换成align-items或align-self
HTML 注释法适合紧急 patch
不改 CSS、不碰构建流程，纯前端热修复时最省事：
- 在相邻标签间插入紧贴的注释：12
- 注释前后不能有空格，否则空格还在，间隙照旧
- 结构略乱，长期维护成本高，但所有浏览器都认，连 IE6 都没问题
- 适合 CMS 输出页、A/B 测试页面、或无法修改样式表的 legacy 项目
真正容易被忽略的是：这个间隙只在 inline 和 inline-block 场景下存在，block、flex、grid 容器里完全不生效。别在 flex 里还去折腾 font-size: 0——那是方向错了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
