Why is there a gap between the bottom of an image and its containing div?

HTML-CSS
1

I thought it was my code on a project i’m frustratingly working on. But I’ve broke the code down to just one image in a class named div and there’s always a gap between the bottom of the image and the divs bottom border.

The top and left borders are flush with the image but the bottom border always has a gap. I know i must be missing something so easy, but for the life of me cannot figure it out. I’m not sizing the image in the HTML, its just a 256 x 128 pixel jpeg and the only formatting in the style i’m doing is;

border:1px solid red;
Akinator Xender

just for testing purposes.

2

And your sure the image doesn’t have that gap worked in?

Can we see the html? trying setting margin/padding to 0.

3

Kind of hard to say without some code to look at, but have you tried setting the image to display:block