Question

简单代码：

<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/

Answer 1

我认为这是导致问题的线高。 Check it out

另一方面，我知道你说它本来是这样的，但实际上无效（？）HTML在锚点内部有div标签。请尝试改为使用span。

Answer 2

两个图像以内嵌方式显示。这意味着图像的基线与文本的基线对齐。在文本下方，通常会有更多空间来说明pjgq之类的字母低于基线。

只需制作图像display: block;即可解决此问题。

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

Answer 3

同时添加display:block;

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

Answer 4

你可以漂浮和清除它们：

img {
    clear: both;
    float: left;
}

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

Answer 5

<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>

Answer 6

你在IE中遇到问题吗？尝试将两个图像标记放在HTML中的同一行，没有任何空格......

Answer 7

这对我来说很有用：

img
{  
    display: block;
}

Answer 8

简单地说你的css，

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

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

Answer 9

波格丹说的话，或者：

<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之间的空白实际呈现，这给出了两个图片之间的空间。

- 皮特

这个差距来自何处以及如何摆脱它？

9 个答案: