Error extraño con borde/esquema/margen/relleno

Question

HTML (3x veces):

<div class="scream">
  <div class="author">
    <img src="avatars/dagrevis.png" alt="" title="daGrevis" />
  </div>
  <div class="data">
    <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</span>
  </div>
  <div class="clearer"></div>
</div>

CSS:

.scream {
  background: #F4F4F4;
  width: 944px; height: 48px;
}

.scream .author {
  float: left;
}

.scream .data {
  float: left;
}

.clearer { clear: both; }

Así es como se ve en mi navegador:

Como puedes ver, height se establece en 48px. El tamaño de las imágenes también es 48px. Cómo viene que no veo cada div.scream en línea separada? Si me puse height ¡A 50px, por ejemplo, todo funciona! En mi opinión, es porque hay algo de tipo de borde/esquema/margen/relleno que arruina mi vida. Desafortunadamente, con Firebug no veo nada así ...