CODEWITHSUNDEEP
csshtmlgoogle-chrome-devtools
Hristo
Hristo

Reputation: 46557

question about element dimensions as shown in Chrome Developer Tools

UPDATE

Here's a fiddle to play with:

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

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

hover over image

hover over div

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?

Upvotes: 0

Views: 243

Answers (1)

tw16
tw16

Reputation: 29615

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;
}

Upvotes: 1

Related Questions