[html] Image inside div has extra space below the image

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 {_x000D_
  border: 1px solid red;_x000D_
  width:200px;_x000D_
}_x000D_
img {_x000D_
  width:200px;_x000D_
}

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

Another option suggested in this blog post is setting the style of the image as style="display: block;"

One can also nullify parent's line height:

#wrapper {
  line-height: 0;
}

All fixes: http://jsfiddle.net/FaPFv/

I found it works great using display:block; on the image and vertical-align:top; on the text.

.imagebox {_x000D_
    width:200px;_x000D_
    float:left;_x000D_
    height:88px;_x000D_
    position:relative;_x000D_
    background-color: #999;_x000D_
}_x000D_
.container {_x000D_
    width:600px;_x000D_
    height:176px;_x000D_
    background-color: #666;_x000D_
    position:relative;_x000D_
    overflow:hidden;_x000D_
}_x000D_
.text {_x000D_
    color: #000;_x000D_
    font-size: 11px;_x000D_
    font-family: robotomeduim, sans-serif;_x000D_
    vertical-align:top;_x000D_
    _x000D_
}_x000D_
_x000D_
.imagebox img{ display:block;}

<div class="container">_x000D_
    <div class="imagebox">_x000D_
        <img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>_x000D_
    </div>_x000D_
    <div class="imagebox">_x000D_
        <img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>_x000D_
    </div>_x000D_
    <div class="imagebox">_x000D_
        <img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>_x000D_
    </div>_x000D_
    <div class="imagebox">_x000D_
        <img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>_x000D_
    </div>_x000D_
    <div class="imagebox">_x000D_
        <img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>_x000D_
    </div>_x000D_
    <div class="imagebox">_x000D_
        <img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>_x000D_
    </div>_x000D_
</div>

or you can edit the code a JS FIDDLE

I just added float:left to div and it worked

All you have to do is assign this property:

img {
    display: block;
}

The images by default have this property:

img {
    display: inline;
}

I used line-height:0 and it works fine for me.

You can use several methods for this issue like

1. Using line-height

   #wrapper {  line-height: 0px;  }
   

2. Using display: flex

   #wrapper {  display: flex;         }
   #wrapper {  display: inline-flex;  }
   

3. Using display: block, table, flex and inherit

   #wrapper img {  display: block;    }
   #wrapper img {  display: table;    }
   #wrapper img {  display: flex;     }
   #wrapper img {  display: inherit;  }
   

Quick fix:

To remove the gap under the image, you can:

• Set the vertical-align property of the image to vertical-align: bottom; vertical-align: top; or vertical-align: middle;
• Set the display property of the image to display:block;

See the following code for a live demo:

#vAlign img {_x000D_
  vertical-align :bottom;_x000D_
}_x000D_
#block img{_x000D_
  display:block;_x000D_
}_x000D_
_x000D_
div {border: 1px solid red;width:100px;}_x000D_
img {width:100px;}

<p>No fix:</p>_x000D_
<div><img src="http://i.imgur.com/RECDV24.jpg" /></div>_x000D_
_x000D_
<p>With vertical-align:bottom; on image:</p>_x000D_
<div id="vAlign"><img src="http://i.imgur.com/RECDV24.jpg" /></div>_x000D_
_x000D_
<p>With display:block; on image:</p>_x000D_
<div id="block"><img src="http://i.imgur.com/RECDV24.jpg" /></div>

Explanation: why is there a gap under the image?

The gap or extra space under the image isn't a bug or issue, it is the default behaviour. The root cause is that images are replaced elements (see MDN replaced elements). This allows them to "act like image" and have their own intrinsic dimensions, aspect ratio....
Browsers compute their display property to inline but they give them a special behaviour which makes them closer to inline-block elements (as you can vertical align them, give them a height, top/bottom margin and padding, transforms ...).

This also means that:

<img> has no baseline, so when images are used in an inline formatting context with vertical-align: baseline, the bottom of the image will be placed on the text baseline.
(source: MDN, emphasis mine)

As browsers by default compute the vertical-align property to baseline, this is the default behaviour. The following image shows where the baseline is located on text:

(Image source)

Baseline aligned elements need to keep space for the descenders that extend below the baseline (like j, p, g ...) as you can see in the above image. In this configuration, the bottom of the image is aligned on the baseline as you can see in this example:

div{border:1px solid red;font-size:30px;}_x000D_
img{width:100px;height:auto;}

<div>_x000D_
  <img src="http://i.imgur.com/RECDV24.jpg" />jpq are letters with descender_x000D_
</div>

This is why the default behaviour of the <img> tag creates a gap at the bottom of it's container and why changing the vertical-align property or the display property removes it as in the following demo:

div {width: 100px;border: 1px solid red;}_x000D_
img {width: 100px;height: auto;}_x000D_
_x000D_
.block img{_x000D_
  display:block;_x000D_
}_x000D_
.bottom img{_x000D_
  vertical-align:bottom;_x000D_
}

<p>Default:</p>_x000D_
<div>_x000D_
  <img src="http://i.imgur.com/RECDV24.jpg" />_x000D_
</div>_x000D_
<p>With display:block;</p>_x000D_
<div class="block">_x000D_
  <img src="http://i.imgur.com/RECDV24.jpg" />_x000D_
</div>_x000D_
<p>With vertical-align:bottom;</p>_x000D_
<div class="bottom">_x000D_
  <img src="http://i.imgur.com/RECDV24.jpg" />_x000D_
</div>