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

01-04

在a標籤中包裹了一個img以後，a的高度始終比img的高度多幾個像素。html代碼如下：
&
&

&
&Untitled Document&
&
#backBtn {display:inline-block; width:128px;

margin:0; padding:0;border:none; background-image:url(backbtn.png); background-size:100%;
background-position:center; background-repeat:no-repeat;background-color:#F60;}
#backBtn img{width:100%; visibility:hidden; margin:0; padding:0; border:none;}
&
&

&&
&&
&&&&&
&
&
&

效果圖：

可以看到a的高度130，img的高度128。在chrome中a比img多2px，firefox和safari中多4px。這三個瀏覽器都是目前最新版版的。IE中沒有測試。

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，讓它和匿名行級盒子不在一個布局上下文中，也就不存在行級盒的對齊問題

其他解決辦法也有，但這些都是從根本上解決問題

終於找到原因了，因為img是行內元素，默認display: inline; 它與文本的默認行為類似，下邊緣是與基線對齊，而不是緊貼容器下邊緣。將displayp設置為block即可消除上面說的幾個像素的差別。

這個主要是因為img是行內元素，它的下邊緣默認是與基線對齊的，將img的display設置成block，或者將font-size設為0。也可以將a標籤的display設置為block或者inline-block，並將其行高line-height設為0。

行內元素會自動對齊如果有字體的話也會跟著對齊

各標籤本身有自帶屬性樣式，需要先清除樣式！

放個傳送門：

我對CSS vertical-align的一些理解與認識（一） ? 張鑫旭

CSS深入理解vertical-align和line-height的基友關係 ? 張鑫旭

[翻譯]關於Vertical-Align你需要知道的事情

audio標籤手機自動播放？- 百度派