vertical-align对img生效的前提是img必须处于行内格式化上下文（ifc），即display为inline或inline-block，且父容器不能是flex或grid布局。
图片下方的空白间隙不是 bug，是 inline 元素 baseline 对齐的必然结果；vertical-align 能解决，但必须满足前提条件，否则写了也白写。
vertical-align 对 img 生效的前提是什么
这个属性只在 img 处于行内格式化上下文（IFC）时才起作用——也就是说：img 必须是 display: inline 或 display: inline-block，且其父容器不能是 display: flex 或 display: grid。
- 如果父容器设了
display: flex，vertical-align直接被忽略，浏览器根本不会读取它 - 如果给
img自己加了display: block，那它已退出 IFC，vertical-align也不再生效 - 如果
img是行内唯一元素，没有其他同行内元素作参考，vertical-align: middle行为不可靠，可能看起来“没变化”
vertical-align: bottom 和 vertical-align: text-bottom 的区别
两者都常用来“压掉”底部空隙，但对齐基准不同，视觉效果有细微差别：
-
vertical-align: bottom：让img底边贴住**行框（line box）底边**，空隙消失最彻底，兼容性最好，适合大多数“贴底”需求 -
vertical-align: text-bottom：让img底边对齐**文字内容区域底边**（即字母 x 的下边缘），不包含 descender 空间，比bottom略高一点，和旁边文字排版更协调 -
vertical-align: top：对齐行框顶边，适合图标+文字按钮这类顶部对齐场景 -
vertical-align: middle不推荐单独使用——它对齐的是行内盒子的中线，受字体 x-height 影响，换字体或字号就偏移
为什么写了 vertical-align 还有缝？常见干扰项
DevTools 里看到的“图片下面有空”，大概率不是 vertical-align 没生效，而是别的东西在撑空间：
- 父容器设置了
padding-bottom或margin-bottom，误判为图片自身空隙 -
img包在<p></p>里，而<p></p>默认带margin-bottom - HTML 源码中
<img>标签后有换行或空格，触发 inline 元素间的空白符渲染（约 4px），这时要清空空白或设父容器font-size: 0 - 图片本身导出带透明底或留白（比如 Figma 导出未裁切），CSS 无能为力，得修图
- 父容器设置了很大的
line-height，会放大 baseline 空隙；此时单调img的vertical-align不够，得同步控制父级行高
display: block 是最彻底的解法，但要注意副作用
把 img 设为 display: block，直接让它脱离行内上下文，baseline 对齐逻辑完全失效，空隙一劳永逸消失。
- 兼容所有现代浏览器（包括 IE8+），代码只需一行：
img { display: block; } - 副作用明显：
img独占一行，若需图文并排，必须配合float、flex或grid布局 - 如果
img在链接中（<a href><img></a>），display: block后点击区域变成整块矩形——通常是好事，但若设计要求仅图片区域可点，就得退回inline-block + vertical-align组合 - 在
flex或grid容器里，display: block没副作用，可以放心用
真正容易被忽略的，是“图片是否必须保持 inline”这个前提判断——别一上来就调 vertical-align，先看它是不是非得参与文本流。否则改来改去，只是在绕开问题本质。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
