When using HTML images, we sometimes see a white line below the image on a web page. The problem is often only highlighted if we change the background color like this:

![whitespace under html image](/img/no-meat-burgers.jpg)

This happens because images are [inline elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements). And some browsers will automatically add white space below inline elements. 

### Why?

Many inline elements include text (think span, textarea etc), and certain letters need some space below the baseline.

Considering text like this:

> ***space ranger***

All letters except **p** and **g** sit on an imaginary line, called the baseline. Letters p and g fall below, and this is called the descender. And it is this descender area browsers need to allow for with whitespace, so the bottom of text does not get cut off. 

This space is not easily detected since it is not added as a padding or margin value.

### How do we fix this?

There are a number of ways:

1. Change the images display type to block, therefore removing the inline problem:

   ```css
   img {
     display: block;
   }
   ```
2. If you don't want to change the display type, you can change the CSS vertical-align value away from baseline:

   ```css
   img {
     vertical-align: bottom;
    /* or middle / top */
   }
   ```

And either of these techniques should remove the white space under your image.

How To Remove Whitespace Under HTML Images

Why?

How do we fix this?