Mark Thomas Miller

CSS: Eliminating space under images

When making Void, I noticed a strange space underneath an image. I discovered that this was due to the image’s vertical-align property. There’s a simple fix: adding a vertical-align property to the img.

img {
    vertical-align: middle;

This is because the browser renders images inline which adds space for letters and their descenders to the line. 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.