解决图片底部默认空白缝隙问题

解决图片底部默认空白缝隙问题

写在前面：如果此篇博客中有任何错误的地方，欢迎大家的指正！让我们共同进步！
如果觉得这篇博客有用就点赞+收藏+关注三连吧！

问题描述

在做一个背景图片更改效果的时候，发现图片在加了边框之后，在图片的下面会出现一个空表的缝隙
如下图所示，在四个小图片下面会有一个缝隙

问题分析

这是由于形如图片的行内块元素的默认垂直对齐方式是基线对齐（baseline）,给文字预留了部分显示空间（即被文字占用）。

说到垂直对齐方式，就要对四种不同的准线进行描述。
如下图所示，基线和底线之间还留有部分距离。

由于默认的对齐情况是按照英文的基线对齐，在不对垂直对齐方式进行调整的情况下，由于是基线对齐，图片的下面就会产生空白缝隙的情况。

解决方案

方案1：
因此我们只需要将vertical-align其改为非baseline (bottom、middle、top)即可。
对图片使用vertical-align属性，

修改效果如下：

这就使得下面的空白缝隙得以去除。
注：文字可以删掉
（文字添加是为了帮助问题描述，文字是否存在不会影响这个缝隙的产生）

方案2：
由于这个缝隙是由于行内块引起的，因此我们也可以采用将图片的显示效果改为block，方可解决。

修改效果如下：