Extra space below image

This space below the image is not a bug or an issue, and it is a default browser behavior. Images created with <img /> tag by default has display: inline property. Every text, not only in programming, have various properties. This extra gap exists because of the descender. Long story short: descender is the gap below the baseline of the font. So, if our image is treated as text, it has to have a descender.

There are multiple different ways to fix this problem:

• change the image's display property to block
• add vertical-align: middle; to center the image in the div
• add line-height: 0; to the div
• change the div's font-size to 0px;

I can recommend the first solution for this problem. It's the easiest one.

I don't recommend the last two solutions because they set font-size or line-height on all text nodes in the div.

Also, font-size: 0 will affect the image's alt text. If your image doesn't load, your alt text won't display either (okay, it will display, but with font-size: 0, so it will be invisible).

The image below was fixed by adding display: block to the image.