Tenho certeza de que isso foi perguntado antes de alguma forma ou outra, mas eu simplesmente não consigo encontrar uma resposta ..

Eu tenho alguns divs aninhados

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

E o filho tem display: inline-block e overflow: hidden

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

E é processado assim:

Você pode perceber que o pai é 5 vezes maior que o filho.

De onde vem a altura extra?

Aqui está o exemplo:http://jsfiddle.net/w8dfU/

Editar: Eu não quero remover o display: inline-block ou overflow: hidden, este é um exemplo simplificado para ilustrar o problema, mas no meu layout real eu preciso dos dois. Eu só quero entender porque essa altura extra aparece. É especificado em algum lugar que deveria ser assim? É uma consequência de algum outro recurso css?