如何获得正确包含图像的链接？答案

【问题标题】：How do I get a link to properly contain an image?如何获得正确包含图像的链接？
【发布时间】：2011-12-27 20:26:24
【问题描述】：

fiddle

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

注意黑色边框是如何只出现在图像底部的？我该如何解决这个问题，以便它出现在整个事物周围？

我以前做过，但我不记得是怎么做到的......

【问题讨论】：

【解决方案1】：

你可以使用：

a {
    display: inline-block;
}

或者，

a {
    display: block;
}

在这两者中，inline-block 可能更适合您的需要（甚至Internet Explorer 6 and 7 should play nicely 也更适合，因为a '自然是display: inline'）。

【讨论】：

这些都不能在 FF 中正确呈现。内联块显示为一个点，块显示为一条黑线。在 IE 内联块中有效，但它在图像和底部边框之间留下了间隙，而块留下了间隙并填充了整个宽度（我想这还不错，因为我可以明确设置宽度）。跨度>

【解决方案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> 更好

【讨论】：

【解决方案3】：

将display: inline-block 添加到您的a

【讨论】：

【解决方案4】：

在你的 CSS 中放置

display:block;

或

display:inline-block;

在你a标签上。

【讨论】：

【解决方案5】：

像这样在图像周围设置边框：http://jsfiddle.net/nmhAs/

img {
    border:1px solid black;
}

【讨论】：