vertical-align仅对inline或inline-block元素有效，且父容器不能是flex或grid；图片底部空白源于其默认inline特性与基线对齐，设vertical-align:bottom可彻底消除空隙。
display: block 是最直接有效的解法，vertical-align 能用但必须满足前提条件，否则写了等于没写。
为什么图片底下总有一小段空白
这不是 margin、padding 或 border 导致的，而是 <img> 默认是 display: inline，浏览器按文本基线（baseline）对齐它，为英文 descender（如 g、j、y 的下延部分）预留空间。字体越大、line-height 越高，这段空白越明显。
vertical-align 生效的硬性前提
这个属性只在以下两个条件同时满足时才起作用：
-
<img>的display必须是inline或inline-block - 它的**直接父容器**不能是
display: flex或display: grid—— 这两种布局会完全忽略vertical-align - 如果给
<img>自己加了display: block，那它已退出行内格式化上下文（IFC），vertical-align也不再生效 - 单独一个
<img>在空父容器里设vertical-align: middle，常因缺乏对齐参考而“看起来没变化”
该用哪个 vertical-align 值
别碰 baseline（它是问题源头），也慎用 middle（受字体 x-height 影响，换字体就偏移）：
-
vertical-align: bottom：图片底边贴住**行框（line box）底边**，空隙消失最彻底，兼容性最好，适合纯图容器 -
vertical-align: text-bottom：底边对齐文字内容区底部（x-height 下沿），比bottom略高，和旁边文字排版更协调 -
vertical-align: top：顶边对齐行框顶边，适合图标+文字按钮类场景
示例：
img { vertical-align: bottom; }
立即学习“前端免费学习笔记（深入）”；
为什么写了 vertical-align 还有缝
大概率不是属性失效，而是其他东西在撑空间：
- 父容器设置了
padding-bottom或margin-bottom（比如<p>默认带margin-bottom） - HTML 源码中
<img>标签后有换行或空格，触发 inline 元素间约 4px 的空白符渲染 —— 删空格或设父容器font-size: 0 - 父容器
line-height过大，空隙高度 ≈ 0.25 ×line-height；可临时加line-height: 0验证，但别长期用 - 图片本身导出带透明底或底部留白（Figma/PS 未裁切），CSS 无能为力，得修图
真正需要图文同行时，vertical-align 是唯一选择；若只是单图占位，display: block 一劳永逸——但要注意它会让图片脱离行流，无法和文字并排。
