Why does this inline block cause the extra height of its parent?

Question

Code example:

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

Why does div.c2 appear? It does not exist if c3 has displayin addition to the built-in block .

Also see this code: https://codepen.io/uuhan/pen/ZXWodw

UPDATE:

I add line-height: 0 to c2, then div.c2 gets thinner. But how can I cross out this height ( 6px , with a 22px source ) c2?

Also see this code: https://codepen.io/uuhan/pen/EwKRLK

Answer 1

c2 / , . font-size: 0;, , ​​ 0.

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