Div consigue altura adicional por ninguna razón

Question

tengo algunas marcas de este modo:

<div class="account-picture"> 
    <img src="http://i.imgur.com/Mcr3l.png"> 
</div> 

Los div necesidades a ser flotados izquierda. La imagen es 128px x 128px.

Y algunos css:

.account-picture{ 
    float: left; 
    background: #FFFFFF; 
    padding: 10px; 
    border: 1px solid red; 
    font-size: 1px; 
    overflow: hidden; 
} 

img{ 
    border: 1px solid #F8F8F8; 
    overflow: hidden; 
} 

Pero el problema es que no parece haber una cierta altura adicional asignado a la div. Los diagramas de disposición de firebug son los siguientes:

¿Por qué la altura del div obtiene 2 píxeles adicionales? ¿Por qué varía en todos los navegadores?

• Firefox 12: 2px adicional
• IE9: 0.26px adicional
• Chrome: 0px adicional.

Y aquí es un violín: http://jsfiddle.net/mWe5Y/

por qué sucede esto, y cómo me deshago de esa "altura" extra?

Answer 1

Porque img es un elemento en línea.

para deshacerse de esa altura adicional:

.account-picture img { 
    display: block; 
}