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 display property to block
add vertical-align: middle; to center image in div
add line-height: 0; property do the div *****
change font-size of the div 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 it will set font-size or line-height to all text nodes in div.
Also, font-size: 0 will affect image ALT font-size. If your image doesn't work, your alt text won't display too (okay, it will display but with font-size:0, so it will be invisible.
Image below was fixed by adding display:block to image.
