关于Chrome开发者工具中显示的元素维度的问题

Question

更新

这里有一个小提琴：

http://jsfiddle.net/UnsungHero97/RQCt3/1/

---

以下是两张截图，展示了我遇到的......

我遇到的奇怪之处就是这个。当我将鼠标悬停在<img>元素上时，它会将其尺寸显示为288x72，这是我所期望的，因为我将图像的高度设置为72。

然而，当我将鼠标悬停在<div id="logo">元素上时，它会将其尺寸显示为288x76，这意味着在某处有一个额外的4像素有助于此高度。

如果您注意到<div id="logo">元素的CSS属性，则没有指定填充或边距或高度。

那么这些像素来自哪里？为什么会这样？

Answer 1

解决此问题的简便方法是：

img{
    vertical-align: top;
}

实例：http://jsfiddle.net/RQCt3/2/

原因是HTML中的图像被视为内联元素，因此默认情况下在字体基线上对齐。额外的空间可能是允许字母等的底部。

同样，添加display:block也可以完成这项任务：

img{
    display:block;
}