图片下方空隙源于img默认inline时的baseline对齐机制，预留descender空间所致；解决方法包括vertical-align:bottom（最快见效）、display:block（最彻底）或改用flex/grid布局。
图片下方空隙不是 bug，是 baseline 对齐的必然结果；直接设 vertical-align: bottom 最快见效，但前提是它还在行内上下文中生效。
vertical-align 为什么对 img 生效，又为什么经常没用
因为 <img> 默认是 display: inline，而 vertical-align 只对 inline 和 inline-block 元素起作用。但它不是相对于父容器对齐，而是相对于“同一行内的其他行内内容”或行框（line box）边界对齐。
常见失效原因包括：
- 父容器用了
display: flex或display: grid—— 此时img已变成 flex item / grid item，vertical-align完全被忽略 -
img外层套了div且该div是block——vertical-align只作用于行内级元素，不穿透父级盒模型 - 单独一个
img在行内，没有其他同行元素 —— 缺少对齐参考，vertical-align: middle表现不稳定，甚至看起来“没变化”
vertical-align: bottom、top、middle 的实际差异
三者都能消除默认 baseline 带来的空隙，但对齐基准不同，视觉效果有差别：
-
vertical-align: bottom：让img底边贴住**行框底边**，空隙彻底消失，兼容性最好，推荐作为第一尝试 -
vertical-align: top：顶边贴行框顶边，适合图标+文字按钮这类顶部对齐场景 -
vertical-align: middle：对齐的是 x-height 中线（约字体高度的中间），受字体度量影响大；不同字体、字号下位置会漂移，不建议用于精确控制
注意：vertical-align: text-bottom 也能用，它对齐的是文字内容区底部（不含 descender 空间），比 bottom 略高一点，有时和旁边文字更协调。
为什么加了 vertical-align 还有缝？先排查这些干扰项
DevTools 里看到的“图片下面的空白”，大概率不是 vertical-align 没生效，而是别的东西在撑空间：
- 父容器设置了
padding-bottom或margin-bottom，尤其是p标签自带margin-bottom - HTML 源码中
<img>标签后有换行或空格 —— 触发 inline 元素间的空白符渲染（约 4px） - 父容器
line-height很大，放大了 baseline 下方的 descender 空间；此时单调img的vertical-align不够，得同步控制父级行高 - 图片本身导出带透明底或留白（比如 Figma 导出 PNG 未裁切），CSS 无能为力
遇到“明明写了 vertical-align: bottom 还是有缝”，先在 DevTools 展开 img 的 computed height 和 margin，再往上逐层检查父级盒模型。
真正要盯住的，不是“怎么压掉那几像素”，而是“这张图是否必须 inline”。如果它只是独立展示的 banner 或头图，display: block 才是最干净的解法——省去所有 baseline 推演，也避开 vertical-align 的语义陷阱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
