Picture of Michael Lee
:wave: Hey hey, I'm Michael Lee and this is my site about being a developer, being a dad and making side projects.

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.

Thanks for taking the time to read this article. I'd love to stay in touch and share more tips on programming and design and side projects. Sign up and I'll send you my articles straight to your email.