没有文本的内联块元素呈现方式不同

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或Chrome中渲染时，红色div的高度为26px，而黄色div的高度为20px。如何使红色div渲染与黄色div相同，但不包含任何文本？

Answer 1

只是一个想法：

只要div中没有​​文本，就会将其视为内联图像（或其他内容），因此它的vertical-align设置为'baseline'（或text-bottom或其他）而不是'bottom ”。

解决方案：

要纠正错误，请在内部div上设置vertical-align: bottom;。就像其他人提到的一样，绝对没有必要在其中加入空格或隐形元素（但这也是一种（丑陋的）解决方案）

Answer 2

如何将零宽度空间（​）放入“空”节点？

Answer 3

这很蹩脚，但您可以在空div中添加 。

inline-block是一种有趣的显示类型，没有内容，因为font-size和line-height等其他属性实际上可以使元素高于20px。

Answer 4

如果您想拥有特定的高度，请使用

min-height: 1em;

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