图片底部空白源于img默认inline特性导致的基线对齐预留空间；解决法包括display:block、vertical-align:bottom、font-size:0或flex布局，其中display:block最直接有效。
图片下方空白间隙的根源是行内元素的基线对齐
图片默认是 inline 元素，浏览器会把它当作字母（比如 x）那样处理：底部对齐到父容器的 基线（baseline），而基线和行框底边之间留有空间——这就是你看到的“空白”。这不是 margin 或 padding，而是行盒（line box）自身的布局行为。
用 vertical-align: middle 确实能缓解，但必须清楚它对谁生效、怎么生效：
-
vertical-align只对inline、inline-block和表格单元格生效，对block元素无效 -
middle是相对于父行框中“字母x-height”的中点对齐，不是相对于整个父容器居中 - 如果父容器只有图片一个行内元素，
middle仍会因行高（line-height）存在而保留底部空隙
最直接有效的解法：改变图片的 display 类型
与其在基线对齐上反复调试，不如让图片脱离行内布局上下文。以下三种方式任选其一，均能彻底消除间隙：
- 设为
display: block—— 最常用，适合独占一行的图片 - 设为
display: inline-block并配合vertical-align: top/bottom/middle—— 适合需与其他行内元素并排的场景 - 设为
display: flex的子项（如父容器加display: flex）—— 现代布局首选，天然无视行盒间隙
例如：
<div class="wrapper"><img src="icon.png" alt=""></div>只需加一句：
.wrapper img { display: block; }空白立刻消失。
立即学习“前端免费学习笔记（深入）”；
vertical-align: middle 为什么有时“没用”
常见失效场景和对应原因：
- 父容器设置了较大的
line-height（比如line-height: 2），而图片又没设vertical-align—— 此时图片仍按 baseline 对齐，底部空隙被放大 - 图片放在有文字的同一行（如
<span>文字</span><img>），只给图片加vertical-align: middle，但文字本身高度不一致，视觉上仍不对齐 - 用了
vertical-align: middle却忘了父容器需要足够高度容纳对齐后的结果，导致溢出或裁剪
验证是否生效的小技巧：给父容器加 background: yellow，再给图片加 border: 1px solid red，观察红色边框是否紧贴父容器底边。
兼容性与性能提醒
vertical-align 在所有现代浏览器中支持良好，IE8+ 也完全可用。但要注意：
- 它不会触发重排（reflow），只影响绘制（paint），性能开销极小
- 在 Flex 或 Grid 布局中，
vertical-align完全无效 —— 这不是 bug，是规范使然；此时该用align-items或justify-content - 如果项目已大量使用
inline-block布局，统一加vertical-align: top比middle更稳妥，避免因字体渲染差异导致的微小错位
真正容易被忽略的，是那个看不见的 line-height：哪怕父容器没有文字，只要它是行内上下文，这个值就默默控制着图片的垂直定位基准。
