Rogue Padding Below Images

This post is an old post from my previous blog but I thought it might be still useful to some people so I'll repost it here rather than deleting it.

Last week I was modifying the default Drupal Bluemarine theme to incorporate a custom designed layout for a client, and was getting some strange image padding issues when viewing the web site in Firefox. Each of the <img> tags in the web site has about 2 or 3 pixels of padding below each image, and thus causing horizontal white lines between images in the heading of the site.

I tried everything I could to try to remove the padding but nothing worked. So I did a search around and came across the Quirksmode site, which deals with the different ways browsers interpret the CSS, in particular Strict mode and Quirks mode. At the beginning of every HTML document should be a <!DOCTYPE> tag, which tells the browser which version of HTML or XHTML specification the document uses.

In the case of the Bluemarine theme, the <!DOCTYPE> was set to XHTML 1.0 Strict:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

This Quirksmode page best describes what is happening:

In quirks mode img has a default display: block, while in really strict mode it has a default display: inline.

If an image is displayed inline, it leaves a slight space below it. This is because the image is placed on the baseline of the text, and below the baseline there should be some more space for the descender characters like g, j or q.

The offshoot is that in strict mode it's not possible to make a container fit tightly around the image, unless, of course, you explicitly say img {display: block}.

All I needed to do was to add the following text to my CSS file, and everything displayed fine. If you are ever having trouble with rogue padding, or can't figure out why some of your elements are not displaying the way they should, remember to check your <!DOCTYPE>.

Comments

1.0 Transitional has this same issue.
My basic rule of thumb is : if you're using any tag as a display object always use display:block

yes this really works. I have paddings on my images and i just added img{ display:block; }
and everything went the way I like it. Thanks for this

Thank you for posting! I added the img {display: block} to my CSS and the problem vanished! Thank you so much!!

This little post just saved me a lot of time. I couldn't figure out where this padding was coming from to save my life. Thanks Schoonzie.

A lot of people spend hours on these kinds of simple problems and when they finally figure out what the cause is, they fix the problem in their code and move on. Thanks so much for taking the time to post this, you've saved people a lot of time.

In the case of the Bluemarine theme, the was set to XHTML 1.0 Strict:

mpcoc

Thanks a lot!!!
After spending hours and hours of trying to figure it out, I came across your post which fixed it :)

I too spent hours puzzling over this and searching forums before coming across this post. Many thanks.

This tip worked perfectly. Thanks for the post.

what this site if for? I don't understand..

Wow. If you were standing next to me I would kiss you. Seriously. I wish I had found this site about a year ago. It would've probably saved me a gray hair or two and it would've certainly saved me a lot of cussing. I had tried everything...everything but this.

Have been looking for a solution for hours when I found this. For me, changing the doctype to transitional worked:

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

I keep forgetting how much the doctype affects browser output. Thanks for the solution!