css - 带有边框/轮廓/边距/填充的奇怪错误

Question

HTML(3 倍):

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

这是它在我的浏览器中的样子:

如您所见，height 设置为 48px。图片大小也是 48px。为什么我没有在单独的行中看到每个 div.scream？例如，如果我将 height 设置为 50px，一切正常!在我看来，这是因为有某种边框/轮廓/边距/填充破坏了我的生活。不幸的是，使用 FireBug 我没有看到类似的东西......

Answer 1

默认情况下，图像的底部边缘与线框的基线(灰线)对齐。基线下方的空间(也称为“下降空间”)是导致问题的原因。参见 this article由 Eric Meyer 提供更多详细信息。

要修复它，请添加此规则:

.scream .author img {
    display: block;
}

或者这个:

.scream .author img {
    vertical-align: bottom;
}