What's the space under my img tag?

An img tag with space under it.

Browsers render images inline which adds space for letters and their descenders around an image. The easiest way to remove this space is to set an image’s display property to block:

img {
display: block;
}

However, if you don’t want it to display as a block, you can also align the image to the middle of the line so it will have even spacing on the top and bottom:

img {
vertical-align: middle;
}

I recommend making the selector slightly more specific than my fix above (like .containerElement img) to avoid alignment errors for the rest of the images on your site.

About the author

I'm Mark Thomas Miller, a full stack engineer and designer currently working at ConvertKit. (We're hiring!) People like Arnold Schwarzenegger, Lindsey Stirling, and Tim Ferriss use features I've built to connect with their fans. I'm currently geeking out about Svelte, mechanical keyboards, and minimalist UI design, and replaying Ocarina of Time.