现象
当盒子容器中中包含img元素时，如果连接区域对比度较高的情况下，会发现父元素的高度比img图片的高度多出3px，容器底部有一条明显的白边。
<div>
<img src=" ">
<div>刚开始以为是父元素或子元素继承了margin或padding的原因，但排查css重设后问题还是存在，因为刚刚解决掉li元素联排中间有空隙的问题，怀疑又是默认插入空字符的原因。查了一下百度，找到CSDN上的一篇经验，无独有偶的，也是3px问题。
原因
经验作者通过google了解到原因，img是一种类似text的标签元素，在结束的时候，会在末尾加上一个空白符（匿名文本），这个文本外有一个匿名行级盒子，它默认的vertical-align是baseline的，而且往往因为上文line-height的影响，使它有个line-height，从而使其有了高度，因为baseline对齐的原因，这个匿名盒子就会下沉，往下撑开一些距离，所以把a撑高了。
把列表li元素设置为inline-block时无法紧挨似乎也是类似的原因。
解决方案
1）消除掉匿名盒子的高度，给a设置line-height:0或font-size:0
2）给两者vertical-align:top，让其top对齐，而不是baseline对齐
3）【推荐】：给img以display:block，让它和匿名行级盒子不在一个布局上下文中，也就不存在行级盒的对齐问题
参考网页
https://blog.csdn.net/wzp6010625/article/details/80718791