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

Cosecant

It's the newline? Did you put try </div><img? – Reinareinald

Please show the actual CSS styles and/or web page. – Kappa

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.

Laney

Great answer, I had one with display:block before but added that to #sc. Thanks a lot. Hate this kind of MAGIC... No margins, no paddings and adds 20 pxls? That's just craziness! – Cosecant

Do you what type of display images use by default if they aren't block elements? – Foreigner

@user751564 they use display: inline – Laney

@Laney do all inlined elements create this spacing? – Foreigner

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.

Stemware

I was having this magic spacing not created by margin nor padding. This solved it for me. Thanks! – Ambiversion

worked for me too! I had the same gab too (between img and div)..strange – Roaster

This is the correct answer. It is a strange occurence, but this removed the space on the bottom, and did not simply center the image inside the available space. – Libertinism

This is indeed the correct answer. Would be a great to have an explanation. What is going on, and why does this help. – Brittnee

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

Bypass

Resolved, had to use display: block on img tag. Actually can't use <hr> because of design. Also my separator has to be exactly under this div, because of it's background (div starts with a separator and ends with it, so it looks like one fancy box with top and bottom separators as borders). – Cosecant

Answer 4

that's because there is whitespace between the tags

do:

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

Landmass

"I've been trying to delete the whitespace in HTML but doesn't help" – Cosecant