问题描述
在做一个背景图片更改效果的时候，发现图片在加了边框之后，在图片的下面会出现一个空表的缝隙
如下图所示，在四个小图片下面会有一个缝隙
问题分析
这是由于形如图片的行内块元素的默认垂直对齐方式是基线对齐（baseline）,给文字预留了部分显示空间（即被文字占用）。
说到垂直对齐方式，就要对四种不同的准线进行描述。
如下图所示，基线和底线之间还留有部分距离。
由于默认的对齐情况是按照英文的基线对齐，在不对垂直对齐方式进行调整的情况下，由于是基线对齐，图片的下面就会产生空白缝隙的情况。
解决方案
方案1：
因此我们只需要将vertical-align其改为非baseline (bottom、middle、top)即可。
对图片使用vertical-align属性，
修改效果如下：
这就使得下面的空白缝隙得以去除。
注：文字可以删掉
（文字添加是为了帮助问题描述，文字是否存在不会影响这个缝隙的产生）
方案2：
由于这个缝隙是由于行内块引起的，因此我们也可以采用将图片的显示效果改为block，方可解决。
修改效果如下：
