换行就意味着两个图片间有了一个字符 就像是一个空格占位符

 如果你给img定义float属性的话就没有间隙了

解决行内元素间隙bug问题

行内元素之间会产生间隙bug问题的场景：

1、当行内元素之间有“回车”、“tab”、“空格”时就会出现间隙。

如下代码：

<div>
   <a>1</a>
   <a>2</a>
   <span>33333</span>
   <span>44444</span>
   <em>555555</em>
</div>

解决方法：

 1、写在一行，之间不要有空格之类的符号。

<div>
<a>1</a><a>2</a><span>33333</span><span>44444</span><em>555555</em>
</div>

2、使用font-size:0

div{font-size:0;}
a,span,em{font-size:16px;}

图片文字等inline元素默认是和父级元素的baseline对齐的，而baseline又和父级底边有一定距离（这个距离和 font-size，font-family 相关），所以设置 vertical-align:top/bottom/text-top/text-bottom 都可以避免这种情况出现。而且不光li，其他的block元素中包含img也会有这个现象。

解决办法：

1、：定义图片img标签vertical-align:bottom，vertical-align:middle，vertical-align:top。

img{vertical-align:bottom;}

2、：定义容器里的字体大小为0。

div { 
width:110px; 
border:1px solid #000000; 
font-size:0;
}

因为有内边距~