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.