如何获取正确包含图像的链接？

Question

fiddle

截图

来源

<a href="#"><img width="200" height="200"></a>

问题

请注意黑色边框仅出现在图像底部周围？我如何解决这个问题，使它出现在整个事物周围？

我以前做过，但我记不起来......

Answer 1

您可以使用：

a {
    display: inline-block;
}

JS Fiddle demo

或者，

a {
    display: block;
}

JS Fiddle demo

在这两者中，inline-block可能更适合您的需求（甚至是Internet Explorer 6 and 7 should play nicely，因为a是“自然display: inline”。 / p>

Answer 2

试试这个：

<强> HTML

<a href="#">
    <img width="200" border="0" height="200" />
</a>

<强> CSS

a {
    border:1px solid black;
    display: block;
    float: left;
}
img
{
   display: block;   
}

可以找到实时演示here

最好修改<img>代码的边框而不是<a>

Answer 3

在display: inline-block

中添加a

Answer 4

在你的CSS放置

display:block;

或

display:inline-block;

在您a标记上。

Answer 5

将图像边框放在图像周围：http://jsfiddle.net/nmhAs/

img {
    border:1px solid black;
}