Warum verursacht dieser Inline-Block zusätzliche Höhe des übergeordneten Elements?

Question

Beispielcode wie folgt aus:

.c1 { 
    width: 480px; 
    height: 480px; 
    background-color: blue; 
} 

.c2 { 
    width: 100%; 
    background-color: red; 
} 

.c3 { 
    display: inline-block; 
    margin-top: 0; 
} 

<div class="c1"> 
    <div class="c2"> 
    <div class="c3"> 
    </div> 
    </div> 
</div> 

Warum die div.c2 angezeigt wird? Es existiert nicht, wenn c3 display außer Inline-Block hat.

Siehe auch diese codepan: https://codepen.io/uuhan/pen/ZXWodw

UPDATE:

I add line-height: 0 bis C2, dann dünner div.c2 geworden. Aber wie kann ich diese Höhe (6px, mit Ursprung 22px) von c2 herausfinden?

Siehe auch diese codepan: https://codepen.io/uuhan/pen/EwKRLK

Answer 1

c2 existiert/eine Höhe hat, weil es mindestens so hoch ist wie eine Textzeile ist. Wenn Sie font-size: 0;, um es hinzuzufügen, verschwindet es denn dann hat es Höhe 0.

https://codepen.io/anon/pen/RLaJLj