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/

如果您需要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>

环绕图像的链接使div略高

3 个答案: