div和img之间的空间？

Posted 2023-03-06

【中文标题】div和img之间的空间？

【英文标题】：Space between div and img?

【发布时间】：2011-04-26 05:11:24

【问题描述】：

我有这样的代码：

        <div id="sc">  
            <h1>1. Orange</h1>
            <p>some text in here </p>                                          
        </div>
        <img class="separator" src="images/separator.png" /> 

“sc”div 和“separator”img 之间总是有 13px 的间隙。

两者的边距和填充设置为 0、null、空、无。啊。我很生气;d

我试图弄清楚 firebug 发生了什么，但它们之间的空间不属于任何东西，它不是边距，也不是填充，到底是什么？

没有浮动，没有显示设置，也没有继承的边距或填充。

我的代码有什么问题？我一直在尝试删除 html 中的空格，但没有帮助（顺便说一下，如果我将分隔符放在“sc”div 上方，也会有一些差距，但更小）。

谢谢。

[添加]

CSS 样式：

.separator 
    margin: 0;
    padding: 0;


#sc 
    text-align: justify;
    padding: 0;
    margin: 0;
    background-image: url('images/bg.png');  
    background-repeat: repeat-y;
    width: 970px;

【问题讨论】：

这是换行符？你尝试</div><img了吗？

请显示实际的 CSS 样式和/或网页。

【参考方案1】：

添加显示：块；到 .separator 图像。

.separator 
    margin: 0;
    padding: 0;
    display: block;

问题是图像有时会在它们上方/下方添加一些魔法空间，每当我将图像元素作为*block* 元素使用时，我都会遇到这个问题。

【讨论】：

很好的答案，我之前有一个显示：块，但将它添加到#sc。非常感谢。讨厌这种魔法......没有边距，没有填充并添加 20 pxls？这简直是​​疯了！

如果不是块元素，你默认使用什么类型的显示图像？

@user751564 他们使用 display: inline

@Marko 所有内联元素都会创建这个间距吗？

【参考方案2】：

图像和 div 标签之间有 3px 的间隙。此外，所有样式都设置为 0。真的很奇怪。

修复：

img 
   vertical-align: middle;

这对我来说效果很好。

【讨论】：

我的这种神奇间距不是由边距或填充创建的。这为我解决了。谢谢！

也为我工作！我也有同样的问题（在 img 和 div 之间）..奇怪

这是正确答案。这是一个奇怪的现象，但这移除了底部的空间，并没有简单地将图像置于可用空间内。

这确实是正确答案。有一个解释会很棒。发生了什么，为什么这会有所帮助。

【参考方案3】：

没有截图可以参考，我对你想要什么一无所知，所以这都是猜测。

我从class="separator" 猜测您正试图用水平线分割您的内容。如果是这种情况，您不应该使用具有适当样式的<hr /> 吗？

无论如何，请注意<p> 元素默认设置了垂直边距。

我不明白您为什么要让分隔符紧贴您的文本，因为它在视觉上对我来说没有意义。

如果你真的这样做，有很多选择：

在<p> 上设置margin-bottom: 0; 在.separator 上设置margin-top: -*px;，假设您总是在分隔符之前有一个元素，底部边距为*px #sc p:last-child margin-bottom: 0; 和 IE9.js 让旧版 Internet Explorer 支持它

但我重申；文本和分隔符之间没有边距对我来说听起来不合适。

【讨论】：

已解决，必须在 img 标签上使用 display: block。实际上不能使用

【参考方案4】：

那是因为标签之间有空格

做：

</div><img class="separator" src="images/separator.png" /> 

【讨论】：

“我一直在尝试删除 HTML 中的空格，但没有帮助”