为什么当我将图像置于具有行高的div中时,顶部会出现3px的间隙？

Question

看看这个页面.右边的图像应该在它们的div中居中.但如果仔细观察,顶部有一个约3像素的小边框.如果你禁用overflow: hidden(通过firebug或IE8等效),它会突出底部.

HTML是这样的:

<div class="small">
    <img src="/images/photos/Bedroom.jpg" alt="Bedroom" />
</div>
<div class="small">
    <img src="/images/photos/View.jpg" alt="View" />
</div>

而CSS,这个:

div.small
{
    width:100px;
    height:100px;
    line-height:100px;
    text-align:center;
    overflow:hidden;
    margin:5px;
    background-color: #C0C0C0;
    float:left;
}
div.small img
{
    vertical-align: middle;
    max-width:100px;
    max-height:100px;
    display: inline;
}

造成这种神秘差距的原因是什么？我检查了边距和填充,它们似乎不是问题.

Answer 1

注意:我不完全确定这个解释是正确的,但对我来说这似乎是合理的.

首先,让我们看看规范对领先和半领先的看法:

由于"行高"的值可能与内容区域的高度不同,因此在呈现的字形上方和下方可能存在空间.内容高度与'line-height'的使用值之间的差异称为前导.领先的一半被称为半领先.

用户代理在内联框中垂直居中使用字形,在顶部和底部添加半个引导.例如,如果一段文本是'12px'高而'line-height'值是'14px',则应添加2pxs的额外空间:1px以上和1px以下的字母.(这也适用于空盒子,好像空盒子包含一个无限窄的字母.)

到现在为止还挺好.因此div.small,高度小于div.small's的任何线框都line-height将垂直居中div.small.现在,让我们来看看的vertical-align特性,特别是middle值:

将框的垂直中点与父框的基线加上父框的x高度的一半对齐.

请注意,这不一定是线盒的中心!确切的位置会随着您选择的字体和大小而改变.您可以通过缩放更大和更小的文本来验证这一点:间隙的大小会发生变化.

如您所见,设置font-size: 0完全消除了差距.由于字体现在没有高度,因此线框的前导和半导程为50px,基线垂直居中.为了渲染vertical-align: middle图像,浏览器将其中点设置在该基线处,加上字体的x高度,现在为零.这给出了垂直居中的图像.