Q:

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

Sample code like this:
.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 the div.c2 appear? It does not exist when  c3 has display other than inline-block.
Also see this codepan: https://codepen.io/uuhan/pen/ZXWodw
UPDATE:
I add line-height: 0 to c2, then div.c2 become thinner. But how can I fingure out this height (6px, with origin 22px) of c2 ?
Also see this codepan: https://codepen.io/uuhan/pen/EwKRLK

A:

c2 exists/has a height because it is at least as high as one line of text. If you add font-size: 0; to it, it disappears because then it has height 0.
https://codepen.io/anon/pen/RLaJLj

