块元素的高度，包含内联块元素

Question

在计算包含内联块元素的块元素的高度时，我很困惑，代码如下：

<div style="background: orange;">
    <div style="display: inline-block;"></div>
</div>
<div style="background: green;">
    <div style="background: #d9d9d9; display: inline-block; font-size: 48px; line-height: 12px;">H</div>
</div>

您可以找到示例here。

我的问题是为什么父元素的高度在chrome下是20px？我认为它应该是0，因为它的孩子没有身高。
在第二个示例中，如何在子行高小于font-size时计算父高度？

Answer 1

包含inline-block个元素（甚至是空元素）的块的高度等于其计算的行高。将font-size设为0，将line-height设为1。

jsFiddle