If you’ve ever tried wrapping an <img>
tag in a container and applied a border or background color you will have come across the infamous “why the #$%@$% is there padding space below my image??????!!?” problem. And if you’ve done your due diligence and searched “remove white space below images” you’ve probably found the solution (or this article, which will provide the solution right now): Use CSS to set img as a block level element and the pesky white space below the image magically disappears. It could look something like this:
img {
display: block;
}
A Case of Descenders
Now that you know the solution, let me explain why this is happening. Knowing the reason why will help you remember the solution and also help you understand that this isn’t a bug but a bit of an anachronism left over from a time long past.
Let’s take a quick detour to the world of typography:
When you look at the text I’m writing here you’ll note that lower case letters come in three groups: a, c, e, m, n, o, r, s, u, v, w, x, z, æ, and ø, are uniform in height and contained between the baseline and the median (see graphic above). The other letters have either ascenders (b, d, f, h, k, l, t) or descenders (g, j, p, q, y). The ascender is the portion of the letter that pokes up above the median, the descender is the portion of the letter that dips below the baseline.
What does this have to do with images? Simple: In HTML the <img>
tag is an inline element. That means it’s treated as text. And when text is placed on a page, room is made for the descender. In other words, the white space you see below your image is caused by the browser assuming there might be a descender in the text directly before or after the image and therefore making room for it. The problem of white space appears because while images when first introduced were considered inline elements, today we use them mainly as block elements. As I said earlier, this is all due to an anachronism left over from a time long past.
So, to sum up: Images are inline elements that are assumed to have descenders. When you want them to appear as block level, define them as such and the descender magically disappears.
The End.
9 replies on “Removing White Space Below Image Elements, or Why Inline Elements Have Descenders”
Great post!! Thanx
I never knew the real reason for this. I love practical explanations like this (with accompanying graphics).
Nice Mor10…
Just in time… Thanks for info.. Bye to “float:left” 🙂
Excellent explanation!
Seems another easy solution for just images that wouldn’t change the display type from inline would be to assign all img tags to a font without an ascender or descender.
ie.
* img {
font-family: “images”;
}
Note: that’s just an untested idea I had while reading this post, no idea if it’d work or not.
Unfortunately though that doesn’t work for inline-block elements in general, which is another can of worms, how about solving that mystery next!
Nice ideas. Thanks a lot.
Well, it is a good theory, except that the theme I am using (Twenty Thirteen) already declares images to be blocks, and I still get a huge gap below every image caption. Curiously, there is no gap above the image for where the ascenders should be.
Thanks for explaining, great post!