為什麼a標籤中使用img後,高度多了幾個像素？，標籤img

為什麼a標籤中使用img後,高度多了幾個像素？，標籤img

<li><a href="#"><img src="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。