1

简单代码：

<a href="#">
    <div>
        <img src="http://dummyimage.com/600x400/000/fff&text=image" class="image" />
        <img src="http://dummyimage.com/600x15/000/fff" alt="" class="shadow" />
    </div>
</a>

两个图像的边距和填充为 0，但它们之间仍然存在差距。

如何避免这种行为？

是的，这不是一个错误，整个事情都必须在 A 标签中。

例子：

http://jsfiddle.net/fqrfU/

4

9 回答 9

3

我相信这是导致问题的线高。检查出来。

在另一个方面，我知道你说过它本来是这样的，但实际上将div标签放在锚点内是无效的（？）HTML。尝试使用spans 代替。

于 2011-02-14T19:48:51.613 回答
2

这两个图像是内联显示的。这意味着图像的基线与文本的基线对齐。在文本下方通常有更多的空间来解释pjgq低于基线的字母。

只需制作图像display: block;即可在您的场景中解决此问题。

此页面非常清楚地描述了您的情况：http: //devedge-temp.mozilla.org/viewsource/2002/img-table/

于 2011-02-14T19:52:21.657 回答
1

加入两者display:block;

演示：http: //jsfiddle.net/fqrfU/22/

于 2011-02-14T19:50:29.697 回答
0

您可以浮动并清除它们：

img {
    clear: both;
    float: left;
}

http://jsfiddle.net/lukemartin/fqrfU/11/

于 2011-02-14T19:48:13.283 回答
0 
<a href="#">
    <div>
        <img src="http://dummyimage.com/600x400/000/fff&text=image" class="image" /><img src="http://dummyimage.com/600x15/000/fff" alt="" class="shadow" />
    </div>
</a>
于 2011-02-14T19:48:14.027 回答
0

你的IE有问题吗？尝试将两个图像标签放在 HTML 中的同一行，中间不要有任何空格...

于 2011-02-14T19:51:12.677 回答
0

这刚刚对我有用：

img
{  
    display: block;
}
于 2011-02-14T19:55:59.647 回答
0

只需您的CSS，

.image, .shadow {
    margin: 0;
    padding: 0;
    display:block;
}

http://jsfiddle.net/fqrfU/43/

于 2011-02-14T20:05:29.027 回答
0

博格丹所说的，或者：

<div> <img src="http://dummyimage.com/600x400/000/fff&text=image" class="image" /><img src="http://dummyimage.com/600x15/000/fff" alt="" class="shadow" /> </div> </a>

看，/>和第二个 之间的空白<img实际上是渲染的，它给出了两张图片之间的空间。

——皮特

于 2011-02-14T20:05:42.753 回答