Div получает дополнительную высоту без причины

Question

у меня есть некоторые разметки, как так:

<div class="account-picture"> 
    <img src="http://i.imgur.com/Mcr3l.png"> 
</div> 

В div потребности быть размещены слева. Изображение 128 пикселей x 128 пикселей.

И некоторые CSS:

.account-picture{ 
    float: left; 
    background: #FFFFFF; 
    padding: 10px; 
    border: 1px solid red; 
    font-size: 1px; 
    overflow: hidden; 
} 

img{ 
    border: 1px solid #F8F8F8; 
    overflow: hidden; 
} 

Но проблема есть, кажется, некоторая дополнительная высота назначен дел. Схемы компоновки от firebug следующие:

Почему высота div получает 2 дополнительных пикселя? Почему это зависит от браузеров?

• Firefox 12: 2px дополнительный
• IE9: 0.26px дополнительный
• Chrome: 0px дополнительно.

А вот скрипка: http://jsfiddle.net/mWe5Y/

Почему это происходит, и как я могу избавиться от этой дополнительной «высоты»?

Answer 1

Поскольку img является встроенным элементом.

Чтобы избавиться от этой дополнительной высоты:

.account-picture img { 
    display: block; 
}