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

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'.

解决方案:

纠正这一点,设置vertical-align: bottom;你的内部div.就像其他人提到的一样,绝对没有必要在其中放置空格或隐形元素(但这也是一个(丑陋的)解决方案)