鏈接纏繞圖像使div稍高

Question

如何使圖像周圍的鏈接不會將另一個像素或兩個高度添加到圖像div？

這是簡單的代碼：

<div><a href="#"><img src="http://placekitten.com/g/200/300"></a></div> 

http://jsfiddle.net/xrGDv/

圖片由placekitten主辦，Titran's Kasper

採取的是有一個動態的方式做到這一點？我沒有必要給div一個固定的高度？

Answer 1

將樣式規則添加到圖像，如display: block或vertical-align: top。

該圖像是一個內聯元素，並將在包含它的內聯框的基線下顯示一些空白區域。

例如：http://jsfiddle.net/audetwebdesign/xrGDv/2/

Answer 2

我想，你只需要設置display: block到的img

http://jsfiddle.net/xrGDv/1/

如果您需要在格另一個內容，嘗試設置float: left到IMG公司和<div style="clear:both"後內容

Answer 3

<div> 
    <style> 
     a{margin:0;border:0;display:block;} 
     div {background-color:blue;} 
    </style> 
    <a href="#"> 
     <img src="http://placekitten.com/g/200/300" /> 
    </a> 
</div>