Phantom Whitespace Below Img in Firefox

Posted on 07/22/2009 at 10:24 am by Kevin Wentworth
Viewed 12,464 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.

  1. div#inside img {
  2.     display: block;
  3. }

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.

  1. div#inside img {
  2.     vertical-align: bottom;
  3. }


-Kevin Wentworth

Bookmark and Share

Tags for Phantom Whitespace Below Img in Firefox

Css | Hack | Firefox | Web Design

Comments for this Posting

No comments. Be the first to post a reply.

Sorry, comments are closed for this posting.

Please Email Kevin if you have any questions. Thanks!

Meet Site Avenger - Hosted Content Management System

Powered By: Site Avenger | Site Production: Saco Design