图片上下间隙由默认基线对齐导致，因img作为行内元素会预留文字下行空间；通过设置vertical-align:top/middle/bottom可解决，其中vertical-align最直接有效，也可配合display:block、line-height:0等方案彻底消除间隙。
图片在网页中上下出现过大间隙，通常不是因为 margin 或 padding 导致的，而是因为 vertical-align 的默认对齐方式引起的。这个问题常见于图片放在行内元素（如 span、a 标签）或表格单元格中时，尤其在使用 inline-block 布局时更容易显现。
为什么图片会产生上下间隙？
HTML 中的 img 默认是行内元素（inline element），它会和文字一样遵循基线（baseline）对齐规则。浏览器会为行内元素预留一部分下行文字的空间（比如 g、j、p、q、y 这些字母的下延部分），即使图片后面没有文字，这个空间依然存在，从而造成图片下方出现“空白间隙”。
如何用 vertical-align 修复间隙？
解决办法是调整图片的垂直对齐方式，告诉浏览器不要按基线对齐。常用方法如下：
- vertical-align: middle; —— 让图片与父元素中间对齐，基本消除下部空白
- vertical-align: top; —— 对齐顶部，彻底去除下部空隙，适合布局紧凑场景
- vertical-align: bottom; —— 对齐底部，也能避免基线留白问题
只需要给 img 或其容器加上这些样式即可：
立即学习“前端免费学习笔记（深入）”；
img {
vertical-align: top;
}
其他辅助解决方案
除了 vertical-align，还可以结合以下方式确保间隙完全消失：
- 将图片设置为 display: block; —— 变成块级元素后不再受行高影响
- 设置父容器 line-height: 0; —— 减少行高带来的额外空间
- 给 img 添加 font-size: 0; 在父元素上，防止字体相关留白
基本上就这些。vertical-align 是最轻量、最直接的修复方式，特别适用于 inline-block 布局中的图片排列问题。不复杂但容易忽略。
