CODEWITHSUNDEEP
htmlcsspadding
dwwilson66
dwwilson66

Reputation: 7074

Why does this css/html display extra padding?

For the past few days, I've been struggling with some odd spacing on a website I'm building. Originally, I thought it was a display issue with Chrome, but I've been able to duplicate the problem in IE8, IE9, Firefox and Safari. I'm using old school HTML/CSS for backwards compatibility, so I can say it's not IE handling of HTML5 or some other bleeding edge update.

While some of the solutions on line have led me to try different things including floating the hedad, nothing's been successful & I always have padding on one of the long sides.

I have stripped this down to the BAREST of essentials to reproduce the problem, and have included a screen shot of the padding I can see on my end. I would certianly appreciate another set or seven of eyes showing me what I missed.

EDIT: line height turned out to the the culprit on this one, but vertically aligning the image to top per suggestion left the text at the top of the div. My sense would be that the header tag would preserve the default value, but that the and the img tag within the header would override that. Or can I only have one vertical align per div?

Second, is there a way to collapse line-height with CSS?

HTML CODE

<html>  
        <head>
             <title>Test</title>
             <LINK rel="stylesheet" href="test.css">
        </head>
        <body>
             <div id="header">
             <img src="bluespacer.gif" height=125 width=400>
             TEST
             </div>
        </body>
    </html>

CSS CODE 

#header {
        font: serif;
        color: blue;
        background-color: gray;
    }

My output looks like below

screen capture

and here's the bluespacer.gif; 1px x 1px. Look close, it's like a dust speck!

( bluespacer.gif ) <---

Upvotes: 0

Views: 160

Answers (3)

jeremybarbet
jeremybarbet

Reputation: 912

It's a weird issue. You can do this.

#header img { line-height: 0; }

Upvotes: 1

Andy
Andy

Reputation: 4778

#header img {
    display: block;
}

Upvotes: 0

Boldewyn
Boldewyn

Reputation: 82814

You're looking at the wrong spot. It's not padding but line-height, that generates that white space.

Try to vertically align the image:

#header img {
  vertical-align: bottom;
}

Explanation: In the default style, the image is placed on the baseline of text. That is, the lower edge aligns roughly with the lower edge of, say, the letter 'x'. But because text has descenders (like 'g' or 'j'), the surrounding box is drawn higher, which leads to the extra space below the image.

Upvotes: 5

Related Questions