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 seems to be a padding/margin.

What is the gap or extra space below image?

#wrapper {    border: 1px solid red;    width:200px;  }  img {    width:200px;  }

<div id="wrapper">    <img src="http://i.imgur.com/RECDV24.jpg" />  </div>

Answer 1

By default, an image is rendered inline, like a letter so it sits on the same line that a, b, c and d sit on.

There is space below that line for the descenders you find on letters like g, j, p and q.

You can:

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

div {    border: solid black 1px;    margin-bottom: 10px;  }    #align-middle img {    vertical-align: middle;  }    #align-base img {    vertical-align: bottom;  }    #display img {    display: block;  }

<div id="default">  <h1>Default</h1>    The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt="">  </div>    <div id="align-middle">  <h1>vertical-align: middle</h1>    The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt=""> </div>        <div id="align-base">  <h1>vertical-align: bottom</h1>    The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt=""> </div>    <div id="display">  <h1>display: block</h1>    The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt="">  </div>

---

The included image is public domain and sourced from Wikimedia Commons