Image inside div has extra space below the image

Question

Why in the following code the height of the div is bigger than the height of the img? There is a gap below the image, but it doesn't seem to be a padding/margin.

What is the gap or extra space below the image?

#wrapper {

  border: 1px solid red;

  width:200px;

}

img {

  width:200px;

}

<div id="wrapper">

  <img src="Your Image Url" />

</div>

Answer 1

By default, an image will be rendered inline, like a letter.

It will sit on the same line that a, b, c, and d will sit on.

There is space below that line for the descenders you find on letters such as f, j, p, and q.

Note: You can just adjust the vertical-align of the image to position it elsewhere (e.g. the middle) or change the display so it isn't inline.