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

It's the newline? Did you put try ` – EboMike Oct 16 '10 at 00:46 — EboMike, Oct 16 '10 at 00:46
Please show the actual CSS styles and/or web page. – meder omuraliev Oct 16 '10 at 00:49 — meder omuraliev, Oct 16 '10 at 00:49

score 79 · Accepted Answer · answered Oct 16 '10 at 01:02

79

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.

answered Oct 16 '10 at 01:02

Marko

71,361
28
124
158

3

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! – fomicz Oct 16 '10 at 01:05
Do you what type of display images use by default if they aren't block elements? – Prusprus Sep 21 '12 at 15:10
1

@user751564 they use display: inline – Marko Sep 23 '12 at 08:56
1

@Marko do all inlined elements create this spacing? – Prusprus Sep 24 '12 at 16:11

score 13 · Answer 2 · answered Sep 10 '13 at 19:50

13

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.

answered Sep 10 '13 at 19:50

Lex Semenenko

303
1
3
8

I was having this magic spacing not created by margin nor padding. This solved it for me. Thanks! – JohnnyQ Oct 22 '15 at 15:41
1

worked for me too! I had the same gab too (between img and div)..strange – Rikco May 01 '16 at 17:51
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. – Timar Ivo Batis May 29 '20 at 00:14
2

This is indeed the correct answer. Would be a great to have an explanation. What is going on, and why does this help. – Hassan Baig Nov 13 '20 at 07:34

unrelativity · Answer 3 · 2010-10-16T01:04:59.277

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:

Set margin-bottom: 0; on the <p>
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
#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.

Resolved, had to use display: block on img tag. Actually can't use
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). — fomicz, Oct 16 '10 at 01:06

score -4 · Answer 4 · answered Oct 16 '10 at 00:46

-4

that's because there is whitespace between the tags

do:

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

answered Oct 16 '10 at 00:46

Jonathan Fingland

56,385
11
85
79

"I've been trying to delete the whitespace in HTML but doesn't help" – fomicz Oct 16 '10 at 00:55

Space between div and img?

4 Answers4

Linked