圖片鏈接標籤

Question

你好我創建一個網站，而在網頁的右上角將品牌logo的鏈接標籤內裏我遇到了這個問題

 <a href="#" > 
      <img src='img.png'> 

     </a> 

     img { 
      height: 50px; 
      width: 50px; 
     } 

結果是標籤包裝圖像高度實際上是超過50px即使沒有文字標籤。但是當我給font-size：0它的作品。

所以我需要什麼原因導致鏈接標記需要更多的高度。

請幫助我理解這個概念，而不是隻是一些CSS代碼

我有樣了。請幫我解決一下這個 。

http://jsfiddle.net/amerrnath/TLBEx/

好對不起我從鏈接答案。

White space at bottom of anchor tag

謝謝

Answer 1

更改img小號display到block

a { 
    display:inline-block; 
} 
a img { 
    display:block; 
} 

看到這個jsfiddle

那麼它有什麼作用？鏈接中的圖像的默認display爲inline-block。你設置爲display:inline-block。它是a元素內兩個組合的空白組合，這就是問題所在。

您可以使用兩個嵌套的inline-blockdiv s來模擬其尺寸僅在內部尺寸上設置。 http://jsfiddle.net/TLBEx/4/