内联块元件呈现不同

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; 

在某些情况下使用某种空间是不同的高度。