今天写移动端页面的时候，踩了一个坑，如图，<a>里面有个<img>,<img>与<a>之间底部会有缝隙,这是什么鬼？
image.png
1.首先，<a>标签是inline的，框模型是：行内框。行内框没有包含图片的表现，要使img能像放进一个盒子一样，就应该使用块级框。
display: block或者display: inline-block2.<img>标签为什么会有底下的空白呢？这里要理解所谓的“基线(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;
}
以上三种方法都可以完美解决 <img>与<a>之间底部有缝隙的问题。
