Removing White Space Below Image Elements, or Why 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.

Name tag for WordCamp Seattle 2014

Web Design is a Process – Supporting Links for my WordCamp Seattle 2014 Talk

At WordCamp Seattle 2014 I did a talk titled Web Design is a Process in which I refer to a number of different services and sources. Below are all the links for easy retrieval. Prepare Git Mercurial Subversion GitHub GitHub supports viewing and diffing of PSD files GitHub for the Rest of Us BitBucket Plan […]

Simone - a free accessible responsive WordPress theme

Simone and Building WordPress Themes from Scratch Using Underscores

Over the past few weeks two major releases took place, and now it’s time to talk about them: First, the new free WordPress theme Simone announced my re-entry into the free WordPress theme space. If you’ve been following me for a while you know I’ve released free WordPress themes before and you may also know […]

Drawing of a red/green colour blind test with a logo in the middle

The accessibility-ready Tag Should Be Required for All WordPress Themes

When was the last time you tried navigating your WordPress site using only the keyboard? Chances are you never have, and if you do you are likely to have a sub-optimal experience at best. The alarming reality is only a handful of WordPress themes (and thus WordPress-powered sites) meet basic accessibility guidelines. This is not […]

A meta image for WordPress

Title, Caption, Alt Text, and Description: Harnessing the Power of WordPress Image Metadata

The Title, Caption, Alt Text, and Description fields for images in WordPress are the most ignored and underutilized features that can improve your content and bring more people to your site. Learn how to use them to create better user experiences and more attractive and compelling content.

enquire.js is like a wall in space

Using Media Queries in JavaScript with enquire.js for Responsive Masonry and More

Ever wanted to toggle JavaScript on and off with media queries only to discover you cant? Instead you have to write a huge pile of JavaScript to monitor the initial and changing document width and toggle the script on and off manually. This is cumbersome and requires an unreasonable amount of code to do something […]