Div obtiene altura extra sin motivo

Tengo un marcado así:

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

La div necesita flotar a la izquierda. La imagen es de 128px x 128px.

Y algo de 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 parece haber una altura extra asignada al div. Los diagramas de diseño de firebug son los siguientes: enter image description here

¿Por qué la altura del div obtiene 2 píxeles adicionales? ¿Por qué varía según los navegadores?

  • Firefox 12: 2 píxeles adicionales
  • IE9: 0.26 píxeles adicionales
  • Cromo: 0px adicional.

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

¿Por qué sucede esto y cómo me deshago de esa "altura" adicional?

preguntado el 03 de mayo de 12 a las 08:05

1 Respuestas

Porque img es un elemento en línea.

Para deshacerse de esa altura extra:

.account-picture img {
    display: block;
}

contestado el 03 de mayo de 12 a las 08:05

¿Es esto algo que podemos normalizar en una hoja de estilo de reinicio? - F21

¿Es seguro usar img { display: block; } en una hoja reset.css? Por supuesto, pero probablemente habrá momentos en los que querrá ser tratado como un elemento en línea. En esos casos, deberá agregar CSS en los lugares apropiados para lograrlo. stackoverflow.com/questions/4904668/… - pez payaso

Guau. Buena solución. ¿Cómo lo descubriste? - gracia shao

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.