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
To fix this, simply apply a style of
display: block; to the
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.