关于a链接里面套img，与的底部会留白的问题

今天写移动端页面的时候，踩了一个坑，如图，里面有个,与之间底部会有缝隙,这是什么鬼？

image.png

1.首先，标签是inline的，框模型是：行内框。行内框没有包含图片的表现，要使img能像放进一个盒子一样，就应该使用块级框。
display: block或者display: inline-block
2.标签为什么会有底下的空白呢？这里要理解所谓的“基线(baseline)”。这是一个英文排版概念。我这里还是引用下知乎的链接吧https://www.zhihu.com/question/21558138 讲得很详细！
3.总结下这个问题的几种解法：
(1).处理基线

a{display: block;}
img{vertical-align: bottom;}

(2).强行去掉a标签的行高

a {
  display: block;
  line-height: 0;
}

(3).a标签没有设置行高的时候可以去掉字体大小

a {
  display: block;
  font-size: 0;
}

以上三种方法都可以完美解决 与之间底部有缝隙的问题。