CODEWITHSUNDEEP
htmlcss
Matteo Riva
Matteo Riva

Reputation: 25060

Why is a block level element higher than the image it contains?

Without height specifications, a <div> (or a <p> or any other similar element) that contains only a single image is a bit higher than it. It looks like its 4px higher in Firefox and 5px higher in Chrome (according to Firebug and its chrome equivalent). The extra space is added under the image.

Obviously I can fix this by assigning a height to the div, but I'd like to understand why that space is there and wether there is a way to eliminate it.

Upvotes: 12

Views: 4834

Answers (3)

lilotop
lilotop

Reputation: 577

Add line-height: 0px; to the containing element.

Setting the img to display:block also works but may break if someplace else you're hiding and showing images with display:none / display:inline.

Upvotes: 1

Tom Tu
Tom Tu

Reputation: 9593

Image is inline level element thus it adheres to the line-height setting and it's being set at the baseline of the text by default.

If you will set the image to have vertical-align: bottom it will position the image at the descent line (very bottom of text line)

The other option is to set the image to display: block and skip all this inline gimmick

Upvotes: 25

gertas
gertas

Reputation: 17145

Add to CSS:

img {display: block;}

By default img has display:inline thus all text line related stuff.

Upvotes: 7

Related Questions