这个差距从何而来，如何摆脱它？

Posted 2023-03-06

【中文标题】这个差距从何而来，如何摆脱它？

【英文标题】：Where this gap comes from and how to get rid off it?

【发布时间】：2011-06-27 03:50:14

【问题描述】：

简单代码：

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

两张图片的边距和内边距为 0，但它们之间仍有差距。

如何避免这种行为？

是的，这不是一个错误，整个东西都必须在 A 标记中。

例子：

http://jsfiddle.net/fqrfU/

【问题讨论】：

为什么会有额外的 div？你不需要额外的 div 容器

@corroded，事实上我是这样做的，我的真实代码要复杂得多（图像前后有几个 div）:)

嗯，我的意思是，它们被用作容器吗？还是出于造型目的？

【参考方案1】：

我认为是导致问题的行高。 Check it out.

另外，我知道你说它本来是这样的，但实际上是无效的（？）html 在锚点内包含div 标记。尝试改用spans。

【讨论】：

如果使用 HTML5 文档类型，它是完全有效的。请参阅html5doctor.com/block-level-links-in-html-5 以供参考

哦，伙计，感谢@Luke 指出这一点。没想到。

【参考方案2】：

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

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

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

【参考方案3】：

同时添加display:block;

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

【参考方案4】：

你可以浮动和清除它们：

img 
    clear: both;
    float: left;

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

【参考方案5】：

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

【参考方案6】：

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

【参考方案7】：

通过做简单的CSS，

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

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

【参考方案8】：

博格丹说了什么，或者：

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

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

--皮特

【参考方案9】：

这刚刚对我有用：

img
  
    display: block;