Removing The Small Gap Below An Image With CSS

There is a layout issue that I find myself coming up against over and over again regarding images. The scenario occurs when an image is wrapped within a div, and results in a small gap a couple of pixels tall appearing directly below the image.

I’ve provided an example of this below. First, the code:

<div style="border:1px solid #000">
    <img src="robot.jpg" alt="Robot">
</div>

This would typically produce the following:

Notice the small gap below the image? If, like me, you are a bit of a perfectionist you’ll want to get rid of this. So how do we do this?

The Solution

The trick is to add a bit of CSS to the image, inparticular setting the display property to block like so:

<div style="border:1px solid #000">
    <img src="robot.jpg" alt="Robot" style="display:block">
</div>

And the outcome:

Why Does This Happen?

There are letters in the alphabet where the bottom part of the letter (also known as the ‘descender’) goes underneath the baseline of the word. Letters like g, y, p and q are good examples of this. Because, by default, everything within the div will be inline, these ‘descenders’ will be catered for and, as a result, we are left with this white gap.