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

问题描述

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

问题分析

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

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

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

解决方案

方案1：
所以咱们只须要将vertical-align其改成非baseline (bottom、middle、top)便可。
对图片使用vertical-align属性，

修改效果以下：

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

方案2：
因为这个缝隙是因为行内块引发的，所以咱们也能够采用将图片的显示效果改成block，方可解决。

修改效果以下：