html - 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 和“separator”img 之间总是有 13px 的间隙。

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

我试图弄清楚 Firebug 是怎么回事，但它们之间的空间不属于任何东西，它不是边距，也不是填充，到底是怎么回事？

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

我的代码有什么问题？我一直在尝试删除 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

添加显示: block ；到.separator 图像。

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

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