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

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

image.png

1.首先，<a>标签是inline的，框模型是：行内框。行内框没有包含图片的表现，要使img能像放进一个盒子一样，就应该使用块级框。
display: block或者display: inline-block
2.<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>之间底部有缝隙的问题。

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容