Question

当我试图主题化我的网站时，我发现了一些奇怪的行为，当图像与超链接一起使用时。以下是示例代码：

<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并不完全覆盖它，尽管没有任何东西可以创建边距。这是<a href>行为还是我错过了一个观点？

Answer 1

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

请参阅此处的小提琴：http://jsfiddle.net/zitrusfrisch/7vh8Y/

修改

正如评论img { display: inline-block; }中提到的@Zettam无法解决问题。因此，如果img { display: block; }不是一个选项，因为您希望它们以内联方式显示，请尝试以下方法：

让图片float: left;但不要忘记以某种方式清除浮动，例如将包装元素设置为overflow: hidden;（http://jsfiddle.net/zitrusfrisch/7vh8Y/1/）
包装元素（http://jsfiddle.net/zitrusfrisch/7vh8Y/2/）上的
font-size: 0px;
img { vertical-align: middle; }也适用，只要字体大小不大于图片（http://jsfiddle.net/zitrusfrisch/7vh8Y/3/）

Answer 2

试试这个：

a img { border: 0; }

Answer 3

某些浏览器在超链接内部的图像周围放置边框。您可以通过使用css指定边框来避免这种情况：border-style: none

超链接图像创建了一个奇怪的边缘

3 个答案: