DIV和IMG之间的空间？

Question

我有这样的代码：

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

“ SC” DIV和“分隔符” IMG之间总是有13px的差距。

两者的边距和桨式设置为0，空，空，什么都没有。 argh。我很生气； D

我试图弄清楚火焰发生了什么，但是它们之间的空间不属于任何东西，不是边缘，不是填充，什么是什么？

没有浮子，没有显示设置，也没有继承的边距或桨。

我的代码怎么了？我一直在尝试删除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;
}

Answer 1

添加显示：块;到.Separator映像。

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

问题是图像有时可以在它们下方/下方增加一些魔术空间，每当我使用图像元素作为 *block* 元素。

Answer 2

我在图像和DIV标签之间有3PX差距。所有样式都设置为0。真的很奇怪。

修复程序：

img {
   vertical-align: middle;
}

这对我来说很好。

Answer 3

没有屏幕截图可以参考我想要的东西，所以这一切都在猜测。

我猜是 class="separator" 您正在尝试用水平线分解内容。你不应该使用吗 <hr /> 如果是这样，则具有适当的样式？

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

我不明白为什么您希望分离器紧贴您的文本，因为从视觉上看对我来说没有意义。

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

1. 放 margin-bottom: 0; 在 <p>
2. 放 margin-top: -*px; 上 .separator 您假设您总是在分离器之前始终有一个元素 *px
3. #sc p:last-child { margin-bottom: 0; } 和 ie9.js 让旧的Internet Explorer版本支持它

但是我重申了；文本和分隔符之间没有余量对我来说并不正确。

Answer 4

那是因为标签之间有空间

做：

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