Space Underneath img Fix

Written by Michael Lee 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, side projects and working remotely. Sign up and I'll send you my articles straight to your email.

:wave: Hey hey, I'm Michael Lee! I really appreciate you taking the time to read this article.

Be sure to check out my other articles.