有关Chrome开发者工具中所示的元素尺寸的问题

Question

UPDATE

Here's a fiddle to play with:

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

---

Here are two screenshots that show what I'm encountering...

The weird thing I'm encountering is this. When I hover my mouse over the <img> element, it shows its dimension as 288x72, which is what I expect it to be since I set the height of the image as 72.

However, when I hover over the <div id="logo"> element, it shows its dimensions as 288x76, which means there is an extra 4 pixels somewhere contributing to this height.

If you notice the CSS properties for the <div id="logo"> element, there are no paddings or margins or heights specified.

So where are these pixels coming from? Why is this happening?

Answer 1

An easy way to fix this is:

img{
    vertical-align: top;
}

Live example: http://jsfiddle.net/RQCt3/2/

The reason is that images in HTML are considered inline elements and so by default are aligned on the font base line. The extra space is probably to allow for the bottom of letters etc.

Similarly adding display:block will also do the job:

img{
    display:block;
}