0

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

4

2 回答 2

5

在此处输入图像描述

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

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

.scream .author img {
    display: block;
}

或者这个：

.scream .author img {
    vertical-align: bottom;
}
于 2011-06-18T22:29:52.173 回答
0

如果你玩了一会儿 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>并overflow:hidden在外部使用<div>：

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

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

于 2011-06-18T22:15:46.823 回答