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.