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

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

没有浮点数,没有显示设置,没有继承的边距或填充.

我的代码出了什么问题？我一直试图删除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;
}

这对我很有效.