Weird Bug with Border/Outline/Margin/Padding - css

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...

Answer 1

The bottom edge of an image is aligned with the baseline (the grey line) of the line box by default. The space below the baseline (also called "descender space") is what's causing your problem. See this article by Eric Meyer for more details.
To fix it, add this rule:
.scream .author img {
display: block;
}
Or this one:
.scream .author img {
vertical-align: bottom;
}

Answer 2

If you play around with a DOM inspector for a bit, you'll find that .author is coming out with a height of 52px or so. The extra 4px appears to be coming from the line-height. Setting line-height to 0:
.scream .author {
float: left;
line-height: 0;
}
Fixes the layout: http://jsfiddle.net/ambiguous/8KzdD/
Or, you can float the image to the left as well:
.scream .author {
float: left;
}
.scream .author img {
float: left;
}
That will remove the image from the local flow and make the line-height irrelevant: http://jsfiddle.net/ambiguous/8KzdD/1/
Yet another option is to ditch the clearing <div> and use overflow:hidden on the outer <div>:
.scream {
background: #F4F4F4;
width: 944px;
height: 48px;
overflow: hidden;
}
This will leave the <div class="author"> with their 52px height but the effect won't be visually noticeable: http://jsfiddle.net/ambiguous/8KzdD/2/