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.

Want more?

My newsletter sends rarely. It's where I share updates on the best of my writing: introverted entrepreneurship, esoteric mindset tips, notes from great books, and automating businesses as a solo-owner so they run by themselves. Want to join?

Subscribe