Categories
Web Standards

Removing White Space Below Image Elements, or Why Inline Elements Have Descenders

The white space displayed below image elements in HTML is often cause for confusion, but there is a logical explanation: Images are inline elements, and inline elements have descenders.

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:

Graphic displaying the relationship between ascenders and descenders

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.

Illustration of the descender space created underneath an img element when displayed as default (inline)

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.

By Morten Rand-Hendriksen

Morten Rand-Hendriksen is a staff author at LinkedIn Learning and lynda.com specializing in WordPress and web design and development and an instructor at Emily Carr University of Art and Design. He is a popular speaker and educator on all things design, web standards and open source. As the owner and Web Head at Pink & Yellow Media, a boutique style digital media company in Burnaby, BC, Canada, he has created WordPress-based web solutions for multi-national companies, political parties, banks, and small businesses and bloggers alike. He also contributes to the local WordPress community by organizing Meetups and WordCamps.

9 replies on “Removing White Space Below Image Elements, or Why Inline Elements Have Descenders”

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!

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.

Comments are closed.