Why is the height of my container div taller than image within?

Question

I feel like such a newb asking this, but I can't figure out why any div container seems to always be taller than the content that it contains. See https://codepen.io/grayayer/pen/XWjBJWZ for working example.

.container { 
  background-color:red;
  height: fit-content;
  width: fit-content;
  padding: 0;
}

<div class="container">
  <img src="https://via.placeholder.com/350" height="350" width="350">
</div>

It's like there's always 5px of padding on the bottom, even though I've specifically said not to.

Answer 1

Images are rendered inline by default, so that space at the bottom is accommodating text decenders. You can set display: block; on the image to remove the space.

More information in this answer.