vertical-align: bottom 最常用最稳，因图片默认 baseline 对齐会预留 descender 空隙，bottom 使底边贴行框底边，彻底消除空隙且兼容性好、不影响图文混排。
vertical-align 能解决图片下方留白，但只在 img 是 inline 或 inline-block、且父容器未启用 flex 或 grid 时才生效；直接写 vertical-align: bottom 最快见效，但多数“还有缝”的情况其实跟它无关。
vertical-align: bottom 为什么最常用也最稳
图片默认 vertical-align: baseline，浏览器会为字母 g/y 的 descender 预留空间，导致底部几像素空隙。vertical-align: bottom 让图片底边贴住**行框（line box）底边**，不依赖字体度量，空隙彻底消失。它兼容所有现代浏览器，且不影响图文混排——比如按钮里图标+文字并排时，位置始终一致。
-
vertical-align: middle不推荐单独用：它对齐的是 x-height 中线，换字体、换字号就偏移 -
vertical-align: top会让图片顶边贴行框顶边，在行高较大时容易和旁边文字错位 -
vertical-align: text-bottom对齐文字内容区底部（不含 descender），比bottom略高一点，有时更协调，但仍有 1–2px 残留风险
为什么加了 vertical-align 还有缝？先查这三处
DevTools 里看到的“图片下面有空”，90% 不是 vertical-align 失效，而是别的东西在撑空间：
- 父容器有
margin-bottom或padding-bottom，尤其<p>标签自带margin-bottom -
<img>标签后存在换行或空格，被渲染为一个空格字符，产生约 4px 宽度间隙（仅inline场景下可见） - 父容器设置了较大的
line-height（如line-height: 2），放大了 descender 空间；此时单调调img的vertical-align没用，得同步控制父级行高，或临时设font-size: 0
vertical-align 在 flex / grid 布局里完全无效
一旦父容器设了 display: flex 或 display: grid，<img> 就变成 flex item / grid item，脱离行内格式化上下文（IFC），vertical-align 直接被浏览器忽略——DevTools 里会标灰，也不起作用。
立即学习“前端免费学习笔记（深入）”；
- 此时图片对齐由
align-items或align-self控制，底部空隙天然不存在 - 如果用了
display: inline-flex，且外层还有文字，空隙可能以“行内 flex 容器整体参与基线对齐”的形式重现 - 真要微调对齐，用
align-self: flex-start或align-self: center，别碰vertical-align
真正要盯住的，不是 vertical-align 写没写对，而是图片是否必须 inline
空隙本质是行内排版规则的副产品，不是 bug。要不要动 vertical-align，取决于图片是否需要和文字同行显示：
- 需要图文混排（比如图标+按钮文字）→ 保留
inline，首选vertical-align: bottom - 图片独立占行、不需要和文字对齐 → 直接设
display: block，一劳永逸，且避免所有 inline 隐式行为 - 图片本身导出带透明底或底部留白（如 Figma/Sketch 导出 PNG 未裁切），CSS 无法修正，得重新导出
