超链接图片创建了一个奇怪的边距

当我试图主题我的网站时，我发现图像与超链接一起使用时会出现一些奇怪的行为。下面是一个示例代码：超链接图片创建了一个奇怪的边距

<div id="maindiv"> <a href="google.com"> 
    <img src="https://lh4.ggpht.com/AlYHsHF4I5Y0Hx-64ObsbQsJVgbVIu-GK6cJwn1PHeeH0aIlEv1vtizf7whwfB8kuA=w16"> 
</a> </div>

您还可以在这里先睹为快吧： http://cssdeck.com/labs/vzine2bc

正如你所看到的，有在图像一个奇怪的保证金，包含div是不完全覆盖它eventhough有没有什么创造的余地。这是一个<a href>行为还是我错过了一个观点？

来源

2013-11-02 Mia

予更大的'没有看到'奇怪的边缘'.. –

我没有发现任何奇怪的边缘。你正在使用哪种浏览器？请使用其他浏览器测试。 –

我真的对你的问题感兴趣。这里是[小提琴]（http://jsfiddle.net/timofeimih/dWQRH/），更好地显示问题 – timofeiMih

img { display: block; }~~或img { display: inline-block; }~~应该修复它。

见小提琴这里：http://jsfiddle.net/zitrusfrisch/7vh8Y/

编辑：

由于@Zettam在评论中提到img { display: inline-block; }不能解决问题。所以，如果因为你想让他们内嵌显示img { display: block; }不是一个选项，请尝试以下办法：

让图像float: left;但不要忘记清除以某种方式，例如浮动设置在包装元件上的缠绕元件到overflow: hidden;（http://jsfiddle.net/zitrusfrisch/7vh8Y/1/）
font-size: 0px;（http://jsfiddle.net/zitrusfrisch/7vh8Y/2/）
img { vertical-align: middle; }作品以及，只要字体大小不大于所述图像（http://jsfiddle.net/zitrusfrisch/7vh8Y/3/）

来源

2013-11-02 21:00:24

display：block解决了这个问题，但是由于它将“块”扩展到行的末尾，所以图像在无限长度下变得无用。 – Mia

inline-block对边距没有影响 – Mia

确实，对不起！看到我更新的答案以上两个替代方案。 –

试试这个：

a img { border: 0; }

来源

2013-11-02 17:33:53 azz

没有帮助。我不认为这是一个边界问题。 – Mia

有些浏览器把边框是内部链接的图像。您可以通过使用CSS指定边境避免这种情况：border-style: none

来源

2013-11-02 17:39:14 Jardo

超链接图片创建了一个奇怪的边距

回答

相关问题