为什么，当我在一个div居中的图像与行高，做了3px的差距出现在顶部？

Question

看一看此页面。右边的图像应在其申报单中居中。但是，如果你仔细观察，有在顶部大约3像素的边陲。并且如果禁用overflow: hidden（通过萤火或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

注：我不能完全肯定这样的解释是正确的，但它似乎是合理的我的

。

首先，让我们看看该规范已在领导和半领先：

  

由于“行高”的值可以从内容区域的高度是不同的可能存在上面的空间和下方呈现字形。内容高度和“行高”的使用值之间的差被称为前导。一半的领先被称为半领先。

     

用户代理垂直居中字形在一个行内框，加入半领先上的顶部和底部。例如，如果一段文本是“12px的”高和“行高”的值是“14px的”，的额外的空间2pxs应添加：1px的上方和下方的字母1px的。 （这也适用于空盒以及，仿佛空盒包含一个无限窄信。）

到目前为止，一切都很好。这样的高度小于div.small的div.small一个line-height内的任何行框将被垂直居中与div.small。现在，让我们来看看的vertical-align财产，特别是middle值：

  

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

请注意，这并不一定是行框的中心！确切位置将与您选择的字体和大小的变化。可以通过缩放文本较大和较小的验证此：所述间隙的大小而变化

如你发现，设置font-size: 0完全去除间隙。由于字体现在已经没有高度，线箱得到了领导和半领先50像素的，与基线垂直居中。要渲染vertical-align: middle图像，浏览器将其在基线中点，加上字体，这是目前为零的x高度。这给出了一个垂直居中的图像。

Answer 2

原来，设置于在div font-size:0;解决该问题。但是，它仍然不能解释的差距。任何人都知道的引起的差距？

Answer 3

我不能完全解释发生了什么，但处理同样的问题后，似乎它有什么做我宣布在CSS字体属性，e.g的方式。

字体：11像素/ 1.35em宋体，Arial字体，黑体，无衬线;

=坏显然表。 - 我删除声明和替代使用字体大小：11像素，行高：像素，字体家庭等，并且它固定的间隙

！