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

【问题标题】：Weird Bug with Border/Outline/Margin/Padding带有边框/轮廓/边距/填充的奇怪错误
【发布时间】：2011-09-17 22:46:13
【问题描述】：

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

【问题讨论】：

标签： css border padding margin outline

【解决方案1】：

如果您玩过 DOM 检查器，您会发现 .author 的高度约为 52px。额外的 4px 似乎来自line-height。将line-height设置为0：

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

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

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

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

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

另一种选择是放弃空地<div> 并在外部<div> 上使用overflow:hidden：

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

这将使<div class="author"> 的高度为 52px，但效果不会在视觉上明显：http://jsfiddle.net/ambiguous/8KzdD/2/

【讨论】：

【解决方案2】：

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

要修复它，请添加以下规则：

.scream .author img {
    display: block;
}

或者这个：

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

【讨论】：