內聯塊元件呈現不同

Question

<div style="background-color:red"> 
 
    <div style="display:inline-block;background-color:green;height:20px;width:20px;"></div> 
 
</div> 
 
<div style="background-color:yellow"> 
 
    <div style="display:inline-block;background-color:green;height:20px;width:20px;">hi</div> 
 
</div>

當在FF或鉻紅div的高度是26px渲染，而黃色div的高度是20像素。我怎樣才能使紅色div呈現與黃色div相同，但沒有包含任何文字？

Answer 1

只是一個想法：

只要有在div沒有文本，它像對待內嵌圖像（或別的東西），所以它的垂直對齊設置爲「基準」（或文本底部或其他）而不是'底部'。

解決方案：

糾正，在你內心的div設置vertical-align: bottom;。但絕對沒有必要把一個空間或不可見的元素進去，像其他人所說（但是這將是一個（醜陋的）解決方案，太）

Answer 2

如何在「空」節點將零寬度空間（​）？

Answer 3

這是跛的，但你可以添加一個 到空div。

inline-block是一個有趣的顯示類型，沒有內容，因爲其他屬性如font-size和line-height實際上可以生長高於20px的元素。

Answer 4

如果你想有一個特定的高度，用

min-height: 1em; 

在某些情況下使用某種空間是不同的高度。