IMG ma 5px dodatkowego dopełnienia u dołu div

Question

Mam div, który ma tajemniczy 5px dolny margines dodany do obrazu w nim zawartego. Próbowałem zresetować dopełnienie CSS i margines dla wszystkich elementów, ale bez skutku. Co mi brakuje ?:

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

użyć następującego CSS: working jsFiddle

img{display:block;} 

Obrazy są domyślnie wyświetlane w linii - co powoduje dopełnienie pod obrazem. (Ze względu na line-height)

Answer 2

użytku display: inline-block; do obrazu

demo

Answer 3

Odpowiedział here. Użyj

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

Fiddle