为什么a标签中使用img后,高度多了几个像素？

<li><a href="#"><img src="data:images/audio.jpg" alt=""></a></li>
样式：

li{
  height:300px;
  a{
    display: block;
    img{
      width:100%;
      height:100%;

    }
  }
}
效果如图:

知识补充：默认宽高是浏览器自动计算的inline元素内文本占据的行高等的高度，所以可以设置背景颜色。
inline元素的高度与font-size相关，但不是font-size决定,涉及到匿名框，行框，行内框，内容区等

网上查的答案1：

原因：

a元素下有一个匿名文本，这个文本外有一个匿名行级盒子，它有的默认vertical-align是baseline的，而且往往因为上文line-height的影响，使它有个line-height，从而使其有了高度，因为baseline对齐的原因，这个匿名盒子就会下沉，往下撑开一些距离，所以把a撑高了。

解决办法一是消除掉匿名盒子的高度，也就是给a设置line-height:0或font-size:0;
解决办法二是给两者vertical-align:top，让其top对齐，而不是baseline对齐
解决办法三是给img以display:block，让它和匿名行级盒子不在一个布局上下文中，也就不存在行级盒的对齐问题
其他解决办法也有，但这些都是从根本上解决问题

 

网上查的答案2：

 

终于找到原因了，因为img是行内元素，默认display: inline; 它与文本的默认行为类似，下边缘是与基线对齐，而不是紧贴容器下边缘。将displayp设置为block即可消除上面说的几个像素的差别。

或者将font-size设为0。也可以将a标签的display设置为block或者inline-block，并将其行高line-height设为0。