底部空隙是 inline-block 元素按 baseline 对齐时行框预留 descenders 空间的自然结果，非盒模型属性；设 vertical-align: top 可彻底解决，安全兼容且不影响可访问性。
这个底部空隙不是 bug，是 inline-block 在行内格式化上下文（IFC）里默认按基线（baseline）对齐的必然结果。
vertical-align 默认是 baseline，不是 top
只要元素设了 display: inline-block，它就参与行框（line box）布局，和文字一样被当作“字符”处理。浏览器会为整行预留下降部（descenders）空间——比如字母 “g”、“y”、“p” 下方那段留白。哪怕你元素里没文字、没图片，这行框依然存在，空隙就出在这里。
关键点在于：这段空隙不属于任何元素的盒模型，所以在开发者工具里 hover 任何一个元素都看不到它；它既不是 margin，也不是 padding 或 border，而是渲染层自动加的“行内留白”。
-
vertical-align: baseline是默认值，不是你显式写的，容易忽略 - 即使父容器
font-size很小，只要行高（line-height）没压到 0，空隙就还在 -
img标签也默认vertical-align: baseline，所以常和文字混排时底部对不齐
用 vertical-align: top 最轻量且可靠
直接给所有 inline-block 元素加 vertical-align: top，就能绕过基线对齐逻辑，让顶部对齐行框顶端，空隙立刻消失。
- 不影响
text-align控制水平居中，保留inline-block的灵活性 - 不用改父容器样式，不触发继承问题，比
font-size: 0更安全 - 兼容 IE8+，无渲染副作用，也不会干扰屏幕阅读器解析
- 如果需要底部对齐，可用
vertical-align: bottom；要中间对齐，用vertical-align: middle（注意：这是相对于父元素 font-size 中心，不是元素自身中心）
别碰负 margin 和 letter-spacing 这类补丁
有人试过 margin-bottom: -4px 或 letter-spacing: -0.31em，但这些方案本质是在“掩盖”问题，而不是解决对齐逻辑。
- 空隙宽度随
font-size和line-height变动，换字号就得重调负值 -
letter-spacing会影响子元素文本渲染，旧版 Safari 对letter-spacing: 0重置不彻底 - 负 margin 在缩放或高 DPI 屏幕下容易出现 1px 偏差，Chrome 和 Safari 渲染结果可能不一致
- 更隐蔽的风险：加了
transform: scale(0.99)之类补丁后，元素实际尺寸变了，但无障碍属性（如 aria-label）仍按原始 DOM 解析，可访问性受损
真正容易被忽略的是：当页面同时存在 legacy inline-block 布局和新写的 flex 布局时，有人会一边给老模块加 vertical-align: top，一边又在父容器上叠 font-size: 0 ——后者不仅多余，还可能让嵌套的 em 单位计算归零，比如 width: 20em 变成 0。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
