Как определяется высота div со вложенным Img?

Question

[syntax]

Имеется:

<div class="logo">
          <img src="img/b-logo.png" alt="header-logo" height="47" width="206">
</div>

Почему для div.logo устанавливается высота в 51px, в то время как высота вложенного элемента 47px?
Проверил в firefox, там высота этого же элемента 51.5px.
Скриншот

Comments

[dpismenny]

jsfiddle.net/mn87dbgt

Answer 1

[gleendo]

Высота больше из за того что img инлайновый элемент. Чтобы сравнять высоту блока и img, нужно либо у img указать display: block, либо у div указать font-size: 0

Answer 2

[Александр Зубарев]

Нужно к изображению применить vertical-align:bottom

Answer 3

[Mr Crabbz]

.logo {
   font-size: 0;
}
img {
  margin: 0;
}