MainelyDesign.com Blog

Phantom Whitespace Below Img in Firefox

Posted on 07/22/2009 at 10:24 am by Kevin Wentworth
Viewed 12,871 times | 0 comments

I've come across this thing a few times before- there's a strange space below images in Firefox, but not in IE.  I finally found a nice explanation as to why it happens, which I wanted to post here.

Images are displayed inline by default.  When you are using an image as a block (like when you want an image to take up the entire top half of a page) you'll get some mysterious white space below the image, but only in Firefox.  For once, IE actually seems to render the CSS appropriately.

The fix is simple

Add a display block to your CSS declaration for the img tag.  Now, your image will display as a block without any phantom whitespace underneath the image.

Another solution was to set the baseline to bottom, but I think setting the image to block is much more elegant, plus its semantically correct.

Cheers,

-Kevin Wentworth