Css 为什么此内联块会导致其父块的额外高度？

示例代码如下：

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

.c1{
宽度：480px；
高度：480px；
背景颜色：蓝色；
}
.c2{
宽度：100%；
背景色：红色；
}
.c3{
显示：内联块；
边际上限：0；
}

为什么会出现c2分区？当c3具有

显示

而不是内联块时，它不存在

另请参见以下代码：

更新：

我向c2添加行高：0，然后div.c2变薄。但是我怎样才能找到c2的这个高度（6px，以22px）呢

---

另请参见此代码PAN:

c2存在/具有高度，因为它至少与一行文本一样高。如果添加

字体大小：0
明白了。这是否意味着内联块中始终包含一行？您也可以设置
高度：0
，而不是字体大小（），但如果不设置任何一个，它将高达一行文本。我将行高：0添加到c2类中，高度将变细。我想知道这个高度（6px，原点高度22px）是如何计算的？我想这取决于浏览器的设置和默认值