CSS: Eliminating space under images

January 16, 2017

Space Under Image

Under certain circumstances, additional space is added beneath images. While it’s terrible for OCD, it’s pretty easy to fix.

img {
  vertical-align: middle;
}

Browsers render images inline which adds space for letters and their descenders to the line. You can also change your image to display: block to fix the issue.

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

Get the articles and announcements that I never post publicly: