vertical-align: middle不能稳定解决图片下方间隙，因其对齐的是行内元素中线而非父容器中心，且依赖字体度量和同行元素参考，在孤立img或line-height过大时易失效；更可靠的是vertical-align: bottom或display: block。
vertical-align: middle 并不能稳定解决图片下方间隙，它常被误用——不是它没效果，而是对齐基准不明确，容易在不同上下文中失效。
为什么 vertical-align: middle 有时没用
这个值让 <img> 对齐到**行内元素的中线（x-height 中点）**，而不是父容器中心。问题在于：
- 如果
<img>是行内唯一元素，浏览器找不到其他行内内容作参考，中线位置无法确定，渲染结果不可控 - 中线高度依赖字体度量：不同字体、
font-size、甚至系统渲染引擎，都会导致中线偏移 - 当父容器有较大
line-height时，middle会让图片明显上浮，反而放大视觉错位
vertical-align: middle 在哪些场景下能凑合用
仅当满足全部以下条件时，它才可能“看起来正常”：
- 父容器是纯行内格式化上下文（即未设
display: flex或display: grid） - 同一行内存在其他行内元素（比如文字、
<span></span>），且它们有稳定字体设置 - 父级
font-size和line-height一致、可控，无继承污染 - 你接受它只是“相对居中”，而非绝对垂直居中（比如和旁边文字比，它大概在中间）
更稳妥的 vertical-align 替代值
若必须保留 inline 或 inline-block 行为，优先选这些：
-
vertical-align: bottom：让图片底边贴住行框（line box）底边，间隙直接消失，兼容性好，语义清晰 -
vertical-align: top：顶边对齐行框顶边，适合图标+文字按钮类布局 -
vertical-align: text-bottom：底边对齐文字内容区底部（不含 descender 空间），比bottom略高，有时更协调
别把 middle 当默认选项；它不是“居中修复器”，而是“行内对齐调节器”，得先确认对齐锚点是否存在。
真正要盯住的，是图片是否还在行内流里
只要父容器用了 display: flex 或 display: grid，vertical-align 就完全失效——这不是 bug，是规范行为。此时间隙本就不该出现。如果还有空隙，说明要么：
- 图片被包裹在额外的
inline容器里（比如外层<span></span>没清掉） - 父容器本身是
inline-flex，且外层仍有文字，导致整个 flex 容器仍参与行内布局 - 空隙其实来自
margin、padding或line-height的误设，不是 baseline 问题
调试时先给父容器加 border，看空隙是否在 border 内部——是，则属行盒空间；否则就是别的属性在作祟。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
