li element width image in it - li height is wrong

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;
}

Solution

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; }

li element width image in it - li height is wrong

JSFiddle