为什么当我将图像置于具有行高的 div 中时，顶部会出现 3px 间隙？
请查看此页面。右侧的图像应位于其 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;
}
是什么导致了这个神秘的差距？我检查了边距和填充，它们似乎不是问题。
Have a look at this page. The images on the right should be centered within their divs. But if you look closely, there's a small border of around 3 pixels at the top. And if you disable the overflow: hidden (through firebug or the IE8 equivalent), it sticks out the bottom.
The HTML is this:
<div class="small">
<img src="/images/photos/Bedroom.jpg" alt="Bedroom" />
</div>
<div class="small">
<img src="/images/photos/View.jpg" alt="View" />
</div>
And the CSS, this:
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;
}
What is causing this mysterious gap? I've checked margins and padding, and they don't seem to be the problem.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
注意：我不完全确定这个解释是否正确，但对我来说似乎是合理的。
首先，让我们看看规范在 前导和半前导：
到目前为止，一切顺利。因此，
div.small中高度小于div.small的line-height的任何行框都将垂直居中div.small。现在让我们看看vertical-align属性，特别是中间值：请注意，这不一定是线框的中心！确切的位置将根据您选择的字体和大小而变化。您可以通过放大和缩小文本来验证这一点：间隙的大小会发生变化。
正如您所发现的，设置
font-size: 0可以完全消除间隙。由于字体现在没有高度，因此行框的前导和半前导为 50 像素，基线垂直居中。为了渲染vertical-align: middle图像，浏览器将其中点设置在该基线上，加上字体的 x 高度（现在为零）。这给出了垂直居中的图像。NB: I'm not completely sure this explanation is correct, but it seems reasonable to me.
First, let's see what the spec has to say on leading and half-leading:
So far, so good. So any line boxes within a
div.smallthat have a height less than thediv.small'sline-heightwill be vertically centered with thediv.small. Now let's look at thevertical-alignproperty, specifically themiddlevalue:Note that this is not necessarily the center of the line box! The exact position will change with your choice of font face and size. You can verify this by zooming the text larger and smaller: the size of the gap changes.
As you found, setting
font-size: 0removes the gap entirely. As the font now has no height, the line box gets a leading and half-leading of 50px, with the baseline centered vertically. To render thevertical-align: middleimage, the browser sets its midpoint at that baseline, plus the x-height of the font, which is now zero. This gives a vertically-centered image.事实证明，在 div 上设置
font-size:0;可以解决问题。然而，它仍然无法解释这一差距。有人知道造成差距的原因是什么吗？Turns out, setting
font-size:0;on the div fixes the problem. However, it still doesn't explain the gap. Anyone know what causes the gap?我无法完全解释发生了什么，但在处理同样的问题后，它似乎与我在 css 中声明字体属性的方式有关，例如
font:11px/1.35em Verdana、Arial、Helvetica、sans-serif；
= 显然对桌子不利。 -- 我删除了该声明，而是使用 font-size:11px、line-height:px、font-family 等，它修复了间隙！
I cant explain entirely what is happening but after dealing with same problem, it appears it had something to do with the way I was declaring font property in css, e.g.
font:11px/1.35em Verdana, Arial, Helvetica, sans-serif;
= bad for tables apparently. -- I removed that declaration and instead used font-size:11px, line-height:px, font-family, etc, and it fixed the gap!