Estoy seguro de que esto se ha preguntado antes de una forma u otra, pero simplemente no puedo encontrar una respuesta ...

Tengo algunos divs anidados

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

Y el niño tiene pantalla: bloque en línea y desbordamiento: oculto

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

Y se renderiza así:

Puedes notar que el padre es 5px más alto que el niño.

¿De dónde viene la altura extra?

Aquí está la muestra:http://jsfiddle.net/w8dfU/

Editar: No quiero eliminar display: inline-block o overflow: hidden, este es un ejemplo simplificado para ilustrar el problema, pero en mi diseño real los necesito a ambos. Solo quiero entender por qué aparece esta altura extra. ¿Se especifica en algún lugar que debería ser así? ¿Es una consecuencia de alguna otra característica de css?