Removing The Small Gap Below An Image With CSS

July 9th, 2013 - Posted by Steve Marks to (X)HTML / CSS, Web Development.

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">

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">

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.

Tags: ,
This entry was posted on Tuesday, July 9th, 2013 at 7:26 am by +Steve Marks and is filed under (X)HTML / CSS, Web Development. You can follow any responses to this entry through the RSS 2.0 feed.

Fear not, we won't publish this

Comments (0)

No comments have been left yet. Be the first