Space Underneath img Fix

Written on June 3, 2014

Recently while working on Edison Union’s shop view, I noticed that there was some odd spacing underneath product images.

See it? No? Maybe this helps.

See it now? It’s throwing off my layout and the title doesn’t look centered. I inspected all the elements around the image and didn’t notice any margin that might have caused the spacing issue.

Doing a quick search I learned that <img> tags are considered to be inline elements. The weird space was caused by space reserved for descenders in letters like g and p.

To fix this, simply apply a style of display: block; to the <img> element.

This gets rid of the odd spacing underneath the <img> element, resulting in something like the image below.

Much better! Here’s also an example of the solution on CodePen.

See the Pen Extra Space Beneath img Fix by Michael Lee (@michaellee) on CodePen.

Stay in touch

Thanks for reading this article. I'd love to stay in touch and share more tips on programming and side projects with you. Sign up and I'll send you my articles straight to your email, you'll also get a free copy of the light themed version of my Git cheat sheet.
Git cheat sheet preview image