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