vertical-align: middle 在底部间隙场景下失效，因其对齐基准是行内中线（x-height中点），受font-size、字体和line-height影响而漂移；推荐用bottom、text-bottom或top，或直接设display: block脱离行内流。
vertical-align: middle 不是解决字体行高导致底部间隙的正确方法，它甚至会让问题更难排查——因为 middle 的对齐基准根本不是你想象的“居中”，而是依赖不可控的字体度量。
vertical-align: middle 为什么在底部间隙场景下会失效
这个值让 <img> 对齐到行内中线（x-height 中点），但该中线位置由父容器的 font-size 和当前字体决定。一旦父级没有文字、或使用了不同字体（比如系统默认的 sans-serif vs 字体加载失败回退的 serif），中线就漂移；如果 line-height 设得很大（比如 line-height: 2），middle 会让图片明显上浮，反而拉大底部视觉空隙。
常见错误现象：
- 加了
vertical-align: middle后，图片位置“看起来没变”或“忽高忽低” - 换浏览器、换系统、甚至刷新页面后，间隙大小不一致
- DevTools 中看到 computed
vertical-align是middle，但元素没响应
真正起效的 vertical-align 替代值有哪些
如果你必须保留 <img> 的 inline 行为（比如和文字混排），以下三个值才实际可控：
立即学习“前端免费学习笔记（深入）”；
-
vertical-align: bottom：让图片底边贴住行框（line box）底边，间隙直接消失，兼容性最好，推荐作为第一尝试 -
vertical-align: text-bottom：对齐文字内容区底边（字母 x 下边缘），比bottom略高一点，和旁边文字排版更协调 -
vertical-align: top：顶边贴行框顶边，适合图标+文字按钮类布局，也能彻底规避底部空隙
注意：text-bottom 和 bottom 的差异很小，但在 line-height > 1.2 且有文字同行时，text-bottom 更自然；纯图片孤立场景优先用 bottom。
为什么 display: block 往往比 vertical-align 更可靠
因为 display: block 让 <img> 完全脱离行内格式化上下文（IFC），不再参与 baseline 对齐，也就从根本上绕开了 line-height 和字体度量带来的干扰。
实操建议：
- 单图展示、卡片封面、banner 图等无需与文字混排的场景，直接加
img { display: block; } - 如果父容器是
<p>或<div>且只放一张图，display: block后记得检查是否需要重置外边距（比如p自带margin） - 不要在外层再套一层
display: block的<div>还试图给<img>加vertical-align——此时属性已完全失效
调试时最容易被忽略的关键点
间隙未必真来自 vertical-align 或 line-height：
- 先给父容器加
border: 1px solid red，看空隙是在 border 内部（说明是行盒空间）还是外部（大概率是 margin/padding 或浮动塌陷） - 检查父容器是否用了
display: flex或display: grid——此时vertical-align全员失效，别白调 - 图片本身导出带透明底（如 Figma 导出未裁切 PNG）、或 CSS 设置了
object-fit: contain+height不匹配，也会模拟出“底部空隙”
真正要盯住的，从来不是“怎么调 vertical-align”，而是“这张图到底还在不在行内流里”。
