相邻图片之间有空白间隙的问题解决

相邻图片之间有空白间隙

当在网页中两张相邻的图片渲染时，会有一定的空白间隙距离存在。、
原因：这是因为< img>图片为 inline-block 行内块元素，这是 inline-block 行内块布局存在的弊端，会在 HTML 元素间中渲染出空白间隙。
可以通过以下方式解决：

1、将图片元素设定为 display:block;

img {
	display:block;
}

适用于图片各自一行的情况。

2、为图片所在的父元素设置 font-size:0; 的形式来解决。

div.fa {
	font-size:0;
}

适用于容器内的直接子元素只有图片元素的情况。
font-size:0; 若没有文字，则为图片的间隙，若有文字，则为文字的 font-size 大小。

3、设置图片属性 vertical-align:top;

img {
	vertical-align:top;
}

让图片基于顶线对齐，这是就覆盖了图片上面的空白间隙。