Я уверен, что это было задано ранее в той или иной форме, но я просто не могу найти ответ ..

У меня есть несколько вложенных div

<div class="parent">
    <div class="child">A</div>
</div>

И у ребенка есть отображение: inline-block и overflow: hidden

.parent{
    background-color:red;
}
.child{ 
    background-color:green; 
    display:inline-block;
    overflow:hidden; 
}

И это выглядит так:

Вы можете заметить, что родитель в 5 раз выше, чем ребенок.

Откуда берется дополнительная высота?

Вот образец:http://jsfiddle.net/w8dfU/

Редактировать: Я не хочу удалять display: inline-block или overflow: hidden, это упрощенный пример, чтобы проиллюстрировать проблему, но в моем реальном макете они мне нужны оба. Я просто хочу понять, почему появляется такая дополнительная высота. Где-то указано, что так должно быть? Это следствие какой-то другой функции CSS?