vertical-align: top 是最稳妥的修复方案，它让元素顶边贴住行框顶边，绕过 baseline 对齐逻辑，彻底消除 descender 预留空隙，且兼容 ie8+、不影响 text-align 居中。
这个空隙不是 margin、padding 或 border，也查不到——它来自 vertical-align: baseline 的默认行为，加 vertical-align: top 就能立刻消失。
为什么底部空隙在开发者工具里“看不见”
它不属于任何元素的盒模型，而是浏览器在构建行框（line box）时，为字母 descenders（如 g、y、p 的下伸部分）预留的空间。即使你的 inline-block 元素里没文字、没图片，这段空间仍被计算在内，导致后续元素被往下推。Chrome/Firefox 的盒模型高亮完全不覆盖它，所以你检查 margin、padding、line-height 都白忙。
最稳妥的修复：显式设置 vertical-align
只需在 inline-block 元素上声明对齐方式，就能绕过基线逻辑：
-
vertical-align: top是首选，兼容性好（IE8+），语义清晰，不影响水平居中（text-align: center仍有效） -
vertical-align: middle或vertical-align: bottom也有效，但middle的计算基准依赖父容器line-height，可能引发意外偏移 - 别只写
vertical-align: baseline—— 这是默认值，等于什么都没改 - 如果父容器有
font-size变化（比如响应式中缩放），top不受干扰；而baseline对齐会随字体度量浮动
什么时候该放弃 inline-block 改用 display: block 或 flex
如果你不需要 inline-block 的“行内流”特性（比如靠 text-align 居中、或与文字混排），直接换掉更干净：
-
display: block+ 显式width彻底退出行内格式化上下文（IFC），空隙根源即刻消失 -
display: flex是现代项目的默认选择：天然忽略 HTML 空白文本节点，且gap可控、可响应，无需操心对齐逻辑 - 注意 IE10–11 不支持
gap，可用margin-right: 8px+:not(:last-child)降级 - 别在
inline-block上叠加transform: scale()或负margin补丁——这些操作会触发新渲染层，且无法通过自动化测试捕获异常
真正容易被忽略的是：legacy 代码里同时存在 font-size: 0 和 vertical-align: baseline，前者管间隙，后者管底部空隙，两个问题混在一起，排查时容易只盯一个方向。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
