身高块元素，其包含一个inline-block的元素

我很困惑计算可包含一个内联块元素块元素的高度时，和代码如下：身高块元素，其包含一个inline-block的元素

<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时计算父高度？

来源

2014-01-29 odin

不回答你的问题（“为什么”的一部分），而是使橙色框0像素，试试这个：http://jsfiddle.net/uAFLk/1/ – Passerby

是的，它做得很好。谢谢。 – odin

包含inline-block元素的块（即使是空的块）的高度等于其计算出的线高度。设置font-size至0和line-height至1。

jsFiddle

来源

2014-01-29 07:32:15 sbichenko

也可以使用'font-size'。 – Andy

编辑答案。字体大小也应该设置为0。 – sbichenko

chrome默认的font-size是16px，默认的line-height是正常的，所以父div的height = 16 * normal？ – odin

身高块元素，其包含一个inline-block的元素

回答

相关问题