Why there is a small space at the bottom of an img tag?

I think this is a small tip but would help you out when developing websites. I just faced it recently and it took me a while to figure out the issue. So, I hope this will save you some time next time when you see it.

In case you haven't noticed, the space appears at the bottom of the image tag. If your image has the size of 200x200, then you, in some cases, may see that the actual frame that covers the image has the size of 200x2XX - which XX is bigger than 0. And this number depends on several factors, it maybe the font size, font family, lineheight.

The img tag, by default, as the inline display mode, so the browsers treat them as for texts, and the space you see is actually for descenders.

There are several ways

Yes, the simplest way is to change the display mode of the image to block.

This applies to the parent text element, for example,

Hope this helps!