なぜこのインラインブロックは親の余分な高さを引き起こしますか？このような

Question

サンプルコード：

.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> 

なぜdiv.c2が表示されていますか？ c3がdisplayの場合、インラインブロック以外は存在しません。

また、このcodepanを参照してください。https://codepen.io/uuhan/pen/ZXWodw

UPDATE：

私は行の高さを追加：0 C2に、そして薄くなるdiv.c2。しかし、どのようにしてこの高さ（6px、起源は22px）のc2を指摘することができますか？ https://codepen.io/uuhan/pen/EwKRLK

Answer 1

C2は、少なくともテキストの1行と高いため、/高さを有して存在する：

また、このcodepan参照。あなたはそれにfont-size: 0;を追加した場合、それは高さ0

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