为什么这个内联块导致其父级的额外高度？

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时，它不存在。

另请参阅此代码：https://codepen.io/uuhan/pen/ZXWodw

更新：

我将 line-height：0 添加到c2，然后div.c2变得更薄。但是我怎样才能找出c2的高度（ 6px ，原点 22px ）？

另请参阅此代码：https://codepen.io/uuhan/pen/EwKRLK

Answer 1

c2存在/具有高度，因为它至少与一行文本一样高。如果你向它添加font-size: 0;，它就会消失，因为它的高度为0。

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