div和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;
}

Answer 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.

Answer 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.

Answer 3

With no screenshots to refer to I'm left in the dark on what you want, so this is all guessing.

I'm guessing from class="separator" that you are trying to break up your content with a horizontal line. Shouldn't you be using <hr /> with appropriate styling if that's the case?

In any case, note that <p> elements have vertical margins set by default.

I don't see why you want the separator right up snug against your text, because it visually doesn't make sense to me.

If you really do, there's a bunch of options:

1. Set margin-bottom: 0; on the <p>
2. Set margin-top: -*px; on .separator where you're assuming you're always going to have an element right before the separator with bottom margin of *px
3. #sc p:last-child { margin-bottom: 0; } #sc p:last-child { margin-bottom: 0; } and IE9.js for letting older Internet Explorer versions support it

But I reiterate; no margin between text and a separator doesn't sound right to me.

Answer 4

that's because there is whitespace between the tags

do:

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