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 articles like this one in your inbox. Sign up for my newsletter.