身高塊元素，其包含一個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的元素

回答

相關問題