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

Question

HTML（3x 次）：

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

这就是它在我的浏览器上的外观：

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

Answer 1

默认情况下，图像的底部边缘与线框的基线（灰线）对齐。基线下方的空间（也称为“下降空间”）是导致问题的原因。有关更多详细信息，请参阅 Eric Meyer 撰写的这篇文章。

要修复此问题，请添加以下规则：

.scream .author img {
    display: block;
}

或者添加以下规则：

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

Answer 2

如果您稍微使用一下 DOM 检查器，您会发现 .author 的高度为 52px 左右。额外的 4px 似乎来自 line-height。将 line-height 设置为 0：

.scream .author {
    float: left;
    line-height: 0;
}

修复布局：http://jsfiddle.net/ ambigitude/8KzdD/

或者，您也可以将图像向左浮动：

.scream .author {
    float: left;
}
.scream .author img {
    float: left;
}

这将从本地流中删除图像并使 line-height 变得无关紧要：http://jsfiddle.net/ambigously/8KzdD/1/

另一种选择是放弃清理

并在外部

上使用 overflow:hidden：

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

这将留下

高度为 52px，但效果在视觉上并不明显：