Setting a 4px height on a div results in a ~12 pixel space in IE8

Question

 <div id="spacer">

 </div>

+

#spacer {
    height: 4px;
}

Firefox and Safari do it right, the space on screen is small. IE8 makes it bigger than 4px. WTF.

If I set it to 200 pixels or whatever, the space is huge. It decreases until I get to around 15 px, at which point IE continues to draw a 15ish px space despite the css saying 4px.

Thanks so much if you can help me.

Answer 1

You're almost certainly running into the line-height and/or font-size properties. Try decreasing those and the space should shrink.

#spacer {
    height: 4px;
    line-height:4px;
    font-size:4px
}

Answer 2

awesome. That is exactly what I needed. Thanks!