overflow:hidden on inline-block fügt dem übergeordneten Element Höhe hinzu

Ich bin mir sicher, dass dies in irgendeiner Form schon einmal gefragt wurde, aber ich kann einfach keine Antwort finden.

Ich habe einige verschachtelte Divs

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

Und das Kind hat display:inline-block und overflow:hidden

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

Und es wird so gerendert:

Sie können feststellen, dass das Elternteil 5 Pixel höher ist als das Kind.

Woher kommt die zusätzliche Höhe?

Hier ist das Beispiel: http://jsfiddle.net/w8dfU/

Bearbeiten:
Ich möchte display:inline-block oder overflow:hidden nicht entfernen, dies ist ein vereinfachtes Beispiel, um das Problem zu veranschaulichen, aber in meinem echten Layout brauche ich beide. Ich möchte nur verstehen, warum diese zusätzliche Höhe erscheint. Steht irgendwo, dass es so sein soll? Ist es eine Folge einer anderen CSS-Funktion?

Ich hatte dieses Problem beim Erstellen eines horizontalen Schiebereglers. Ich habe es mit vertical-align:top auf meinen Inline-Block-Elementen behoben.

ul {
    overflow-x: scroll;
    overflow-y:hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}

ul&::-webkit-scrollbar {
    display: none;
}

li {
    display: inline-block;
    vertical-align: top;
    width: 75px;
    padding-right: 20px;
    margin:20px 0 0 0;
}

Die akzeptierte Antwort oben ist richtig, gibt aber nicht die Erklärung, nach der ich gesucht habe. Eine gute Erklärung lieferte @Alohci in seinem Kommentar.

Erläuterung in wenigen worten:

• Der Wert für vertical-align ist baselinedaher wird das untergeordnete div an der Grundlinie des Textes ausgerichtet.

• Diese Textgrundlinie ist nicht dasselbe wie die untere Zeile. Es ist etwas höher, um Buchstaben mit Unterlängen aufzunehmen: p, q, g.

• Aus diesem Grund wird das Problem durch die Einstellung behoben vertikale Ausrichtung: oben.

.child{
    background-color:green; 
    display:inline-block;
    overflow:hidden; 
    vertical-align: top;
}

Dieser zusätzliche Raum kommt von overflow:hidden der Kinderklasse. Entfernen Sie diese Eigenschaft und überprüfen Sie, ob Sie sie wirklich verwenden möchten overflow:hidden Eigenschaft dann negative Marge für die untergeordnete Klasse verwenden. Sie können dieses zusätzliche Leerzeichen entfernen.