图片底部空白缝隙源于img默认inline且vertical-align:baseline，为文字下伸部预留空间；解决首选vertical-align:bottom（贴行框底边）、top或text-bottom，禁用baseline和不稳定的middle，并排查line-height、空白符及父容器干扰。
图片下边缘多出的空白缝隙，不是 margin 或 padding，而是 <img> 作为 inline 元素默认按 baseline 对齐时，浏览器为英文 descender（如 g、j、y 的下延部分）预留的空间。vertical-align 正是用来调整这个对齐行为的关键属性，但必须用对前提和取值。
vertical-align 生效的前提条件
该属性只对以下两类元素起作用：
-
display: inline或display: inline-block的元素（<img>默认就是 inline） - 父容器必须是行内格式化上下文（IFC），即不能是
display: flex或display: grid - 如果
<img>外层有display: block的包裹盒，且该盒内无其他行内内容，vertical-align 可能因缺乏对齐参考而表现不稳定
推荐使用的 vertical-align 值及效果差异
别用 baseline（它是问题源头），优先选以下三个明确、可控的值：
-
vertical-align: bottom：让图片底边紧贴当前行框（line box）的底边，空隙消失最彻底，兼容性好，适合大多数“贴底”场景 -
vertical-align: top：图片顶边对齐行框顶边，适合图标与文字并排的按钮类布局，视觉整齐度高 -
vertical-align: text-bottom：图片底边对齐文字内容区底部（x-height 下沿，不含 descender 空间），比bottom略高一点，和旁边文字搭配更自然
为什么 vertical-align: middle 常常不理想
它不是相对于父容器居中，而是对齐到“行内盒子的中线”，而这条中线位置取决于字体度量（如 x-height）。不同字体、字号甚至浏览器渲染下，结果不一致。单独一个图片设 middle，又无其他行内元素提供参考，容易出现微小偏移或失效。
立即学习“前端免费学习笔记（深入）”；
配合 vertical-align 使用时要注意的干扰项
即使写了 vertical-align: bottom 还有缝，大概率是这些因素在撑空间：
- 父容器设置了较大的
line-height—— 空隙高度 ≈ 0.25 × line-height，可临时加line-height: 0验证，但需注意内部文字会坍缩 - HTML 源码中
<img>标签后有换行或空格 —— 触发行内空白符渲染（约 4px），删空白或设父容器font-size: 0抑制 - 图片被包在
<p>等自带margin-bottom的标签里，误判为空隙 - 图片本身导出带透明底或底部留白（如设计稿未裁切），CSS 无法修正，需重新导出
