li element width image in it - li height is wrong - html

Question

Take a look at this: http://jsfiddle.net/8D4f4/1/
The problem is that the li-element is too high. You can see that the list element got a grey background. You can see the grey under the image.
The question is. Why is the li element higher than the image?
I need the li element to have the same height as the image.
html
<div id="content">
<ul id="references-all" class="references">
<li data-id="online">
<img src="http://s1.directupload.net/images/140627/779m36rh.jpg"
width="324" height="240" class="references-images">
<div class="description">
<img src="http://s14.directupload.net/images/140627/z49aajek.png">
<div>
<p>Lorem Ipsum Lorem</p>
<img src="http://s1.directupload.net/images/140627/g8yce4ta.png"
width="28" height="27" class="description-arrow">
</div>
</div>
</li>
</ul>
</div>
css
#content .references {
margin-bottom: 50px;
max-width: 980px;
width: 100%;
}
#content .references li {
background-color: darkgrey;
float: left;
margin: 1px;
max-width: 404px;
min-width: 225px;
overflow: hidden;
position: relative;
width: 33%;
}
#content .references li:hover > .description{
background-color: #78785a;
height:100px;
}
#content .references li .references-images {
height: auto;
width: 100%;
-webkit-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-ms-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
}
.description {
bottom: 0;
color: #ffffff;
display: block;
height: 50px;
overflow: hidden;
padding: 7px 0 0 5px;
position: absolute;
-webkit-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-ms-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
width: 100%;
}
.description p {
color: #ffffff;
display: block;
float: left;
font-size: 0.800em;
margin: 0;
padding-bottom: 15px;
padding-top: 10px;
width: 85%;
-webkit-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-ms-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
}
.description .description-arrow {
float: left;
margin-top: 10px;
}

Answer 1

li's height is greater than img's, because img's layout is similar to inline-block and it positions img's bottom edge to the text's baseline which is causing spacing to appear for the text descenders. In your case you can just add vertical-align property to the img element to remove spacing below the image :
img { vertical-align:top; }
JSFiddle

Answer 2

set display:block on your <li> and your <img>
#content .references li {
display:block;
}
#content .references li .references-images {
display:block;
}
Fixed Fiddle