html - 环绕图像的链接使 div 略高

Question

如何使图像周围的链接不向图像 div 添加另一个像素或两个高度？

这是简单的代码：

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

http://jsfiddle.net/xrGDv/

图片由 placekitten 托管，由Titran 的 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/

如果你需要div中的其他内容，尝试设置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>