inline-block元素间间隙是HTML解析器将换行符和空格视为文本节点所致，垂直错位则源于baseline对齐及descender空间；消除间隙最稳方案是父容器font-size:0并重置子元素字号，或改用display:flex布局。
inline-block 元素之间的间隙不是 bug，是 HTML 解析器把换行符和空格当成了真实文本节点；垂直方向的错位也不是没对齐好，而是默认按 baseline 对齐，而基线以下还留着 descender 空间。
为什么 inline-block 元素间总有 4px 间隙
两个 标签之间只要换行或空格，浏览器就会生成一个宽度为 font-size × 0.25em 的空白文本节点。这个间隙在 nav 菜单项、图片栅格、按钮组里特别明显——开发者工具里看盒模型，明明没设 margin，元素却固定错开。
- 该现象只影响
inline和inline-block元素，block或flex容器完全不生效 -
margin: 0或vertical-align: middle单独用压不住它，必须从根源上让那个空格“不可见” - 如果父容器用了
line-height，还会叠加额外高度，加剧错位
消除间隙最稳的现场急救法：font-size: 0
核心逻辑：让父容器“看不见”那个空格——字号归零，空格就没了宽度。但子元素文字会跟着消失，所以必须显式重置。
- 父容器加
font-size: 0，比如.nav { font-size: 0; } - 每个子元素单独设回正常字号，比如
.nav a { font-size: 16px; } - 若子元素含
或，它们可能继承异常，需额外指定font-size - 该方案在 IE8+ 和所有现代浏览器都可靠，不影响可访问性
一劳永逸的解法：display: flex
放弃 inline-block，直接让父容器走弹性布局，间隙天然消失，还能用 gap 精确控制间距。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
.nav { display: flex; }后，子元素默认水平排列、无间隙、支持justify-content对齐 - 子元素无需再设
display: inline-block，哪怕原来是，flex会自动接管布局 - 旧代码若依赖
vertical-align控制对齐，要重写为align-items或align-self - 兼容性注意：IE10+ 支持；若必须兼容 IE9 及更早版本，不能选此方案
vertical-align 不是万能的，但它能解决垂直对齐问题
vertical-align 只对 inline、inline-block、table-cell 元素生效，且必须有“参照物”——单个元素时它不起作用。
- 常见值：
top、middle、bottom、baseline（默认） - 想让图标和文字底部对齐？用
vertical-align: bottom；想居中？vertical-align: middle更可靠 - 若父容器是
flex或block，vertical-align直接失效，别白试 - 图片、
、这类可替换元素也受此影响，常需配合display: block或vertical-align使用
真正容易被忽略的是：间隙和垂直错位往往同时存在，但它们成因不同、解决方案不能混用。比如用 font-size: 0 消除了水平间隙，却忘了子元素里的图片仍按 baseline 对齐，底部还会多出 3–4px 空白——这时候得单独给图片加 display: block 或 vertical-align: top。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
