是这样的，你可以在网上看到很多人说各种各样的方法，最多的是display:block，这个确实可以，但很多人都只知其然不知其所以然。
这一切导致图片出现白边的原因是因为文本对齐方式（vertical-align: baseline;）的问题，这个属性默认是以基线（baseline）对齐，所以才会产生下面有白边的，下面来看看这个属性的几个属性展示图
看到这个大家可能比较熟悉，有点像小时候上学的那种英语本，那我们以前怎么写字母的呢，我们也是以基线为准来写abcd...但是写gf这些字母的时候会发现，他们有个勾勾小尾巴要写到底线位置
这是图片的 vertical-align 导致的，简单操作可以设置 img {display: block;}, 具体原因可以看这篇文章
那这里图片因为是行内块元素，所以也属于行内内容，那如果图片后面跟文字，也需要跟文字对齐。而图片的底部就是在基线上，和abcd一样，对齐方式默认的又是基线对齐，也就是说图片和后面的文本只要基线是在一条线上就行了，所以就出现了白边（基线和底线中间的距离）
那说了这么多，你理解了吗，如果你理解了，你也就明白了为什么转换为block元素就不会出现问题了，因为转换为block元素了以后，他就独占一行，属于一个大盒子（容器），而不属于内容，不存在什么文本对齐，就不会出现白边了
解决方案 是在 img属性中加入
vertical-align: bottom; display:block
