вопрос об размерах элементов, как показано в Chrome Developer Tools

Question

ОБНОВЛЕНИЕ

Вот скрипка, с которой можно поиграть:

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

---

Вот два скриншота, которые показывают, с чем я сталкиваюсь ...

Странная вещь, с которой я сталкиваюсь, заключается в следующем.Когда я наводю указатель мыши на элемент <img>, он показывает его размер как 288x72, как я и ожидаю, поскольку я устанавливаю высоту изображения равной 72.

Однако при наведении курсораэлемент <div id="logo"> показывает его размеры в виде 288x76, что означает, что где-то есть дополнительные 4 пикселя, способствующие этой высоте.

Если вы заметили свойства CSS для элемента <div id="logo">, там нет отступов.или указаны поля или высота.

Так откуда же эти пиксели?Почему это происходит?

Answer 1

Простой способ исправить это:

img{
    vertical-align: top;
}

Пример в реальном времени: http://jsfiddle.net/RQCt3/2/

Причина в том, что изображения в HTML считаются встроенными элементами и поэтому по умолчанию выровнены по базовой линии шрифта. Дополнительное пространство, вероятно, должно учитывать нижнюю часть букв и т. Д.

Аналогичным образом добавление display:block также сделает работу:

img{
    display:block;
}