Jestem pewien, że zostało to wcześniej zadane w innej formie, ale nie mogę znaleźć odpowiedzi.

Mam kilka zagnieżdżonych div

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

A dziecko ma wyświetlacz: blok śródliniowy i przepełnienie: ukryty

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

I wygląda to tak:

Możesz zauważyć, że rodzic jest 5px wyższy niż dziecko.

Skąd pochodzi dodatkowa wysokość?

Oto przykład:http://jsfiddle.net/w8dfU/

Edytować: Nie chcę usuwać wyświetlania: inline-block lub overflow: hidden, jest to uproszczony przykład ilustrujący problem, ale w moim prawdziwym układzie potrzebuję ich obu. Chcę tylko zrozumieć, dlaczego pojawia się ta dodatkowa wysokość. Czy jest gdzieś określone, że powinno tak być? Czy jest to konsekwencja innej funkcji css?