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

take @ this: http://jsfiddle.net/8d4f4/1/

the problem li-element high. can see list element got grey background. can see grey under image.

the question is. why li element higher image?

i need li element have same height 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: 0.5s ease-in; -moz-transition: 0.5s ease-in; -ms-transition: 0.5s ease-in; -o-transition: 0.5s ease-in; transition: 0.5s ease-in;  }  .description {      bottom: 0;      color: #ffffff;      display: block;      height: 50px;      overflow: hidden;      padding: 7px 0 0 5px;      position: absolute;      -webkit-transition: 0.5s ease-in;     -moz-transition: 0.5s ease-in;      -ms-transition: 0.5s ease-in;           -o-transition: 0.5s ease-in;          transition: 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: 0.5s ease-in;    -moz-transition: 0.5s ease-in;     -ms-transition: 0.5s ease-in;      -o-transition: 0.5s ease-in;         transition: 0.5s ease-in; }   .description .description-arrow {     float: left;     margin-top: 10px; } 

li's height greater img's, because img's layout similar inline-block , positions img's bottom edge text's baseline causing spacing appear text descenders. in case can add vertical-align property img element remove spacing below image :

img { vertical-align:top; } 

jsfiddle