IMG ha 5px extra padding in fondo al div

Question

Ho un div che ha un riempimento di fondo 5px mistero aggiunto a un'immagine contenuta al suo interno. Ho provato a reimpostare il riempimento e il margine CSS per tutti gli elementi, ma inutilmente. Che cosa mi manca ?:

JSFIDDLE: http://jsfiddle.net/vbFx9/

HTML:

<div id="list"> 
    <div id="boxscroll"> 
     <div class="list-result"> 
      <img src="images/ps-result.png"> 
     </div> 
     <div class="list-result"> 
      <img src="images/ps-result.png"> 
     </div> 
     <div class="list-result"> 
      <img src="images/ps-result.png"> 
     </div> 
    </div> 
</div> 

CSS:

.list-result { 
    padding:0; 
    margin:0; 
    width:100%; 
    border-bottom: 1px #000 solid; 
    background:#f9f9f9; 
} 
.list-result:hover { 
    background:#e9e9e9; 
} 
#list { 
    top: 100px; 
    bottom:40px; 
    right: 20px; 
    position: absolute; 
    width: 20%; 
    max-width:300px; 
} 
#boxscroll { 
    font-family:'Open Sans'; 
    background:#f9f9f9; 
    overflow: auto; 
    max-height:100%; 
    border: 8px solid #fff; 
} 

Answer 1

utilizzare il seguente CSS: working jsFiddle

img{display:block;} 

Le immagini sono di default visualizzate in linea - il che provoca il riempimento sotto l'immagine. (A causa della line-height)

Answer 2

uso display: inline-block; alla vostra immagine

demo

Answer 3

con risposta here. Utilizzare

.list-result {  
    line-height: 0; 
} 

Fiddle