Search code examples
cssborderpaddingmarginoutline

Weird Bug with Border/Outline/Margin/Padding

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:

My situation.

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

Solution

  • enter image description here

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