Space between div and img?

Question

I have code like this:

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

There's ALWAYS 13px gap between the "sc" div and "separator" img.

Margins and paddings for both are set to 0, null, empty, nothing. Argh. I'm so mad ;d

I was trying to figure out what's going on with firebug but the space between them just doesn't belong to anything, it's not a margin, not a padding, what the heck?

No floats, no display settings, no inherited margins or paddings either.

What's wrong with my code? I've been trying to delete the whitespace in HTML but doesn't help (by the way if I put the separator above the "sc" div there's also some gap, but smaller).

Thanks.

[ADDED]

CSS STYLES:

.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;
}

Solution 1

Add display: block; to the .separator image.

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

The problem is that images can sometimes add a bit of magic space up/below them, I have this issue whenever I'm working with image elements as *block* elements.

Solution 2

I had a 3px gap between an image and div tag. Also all styles were set to 0. Really weird.

The fix:

img {
   vertical-align: middle;
}

This worked beautifully for me.