views:

73

answers:

4

Hello, 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;
}
A: 

that's because there is whitespace between the tags

do:

</div><img class="separator" src="images/separator.png" /> 
Jonathan Fingland
"I've been trying to delete the whitespace in HTML but doesn't help"
fomicz
A: 

How do you use display: block? This sounds like a problem depending on this property.

Lemmi
Nothing, argh :/
fomicz
Did you try to add this property to the img element?
Lemmi
I did and it worked! :) Thanks a lot.
fomicz
A: 

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.

a2h
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).
fomicz
+2  A: 

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.

Marko
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
Yup, I saw the question title and in my head I yelled out `display: block`!!!!
Marko