Weird Bug with Border/Outline/Margin/Padding

Question

HTML (3x times):

<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; }

This is how it looks on my browser:

As you can see, height is set to 48px. Images size is 48px as well. How it comes that I don't see each div.scream in separate line? If I set height to 50px, for example, all works! In my opinion, it's because there are some-kind of border/outline/margin/padding that ruin my life. Unfortunately, with FireBug I don't see anything like that...