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

小编典典

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

css

<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相同，但不包含任何文本呢？

阅读 319

2020-05-16

共1个答案

小编典典

只是一个想法：

只要div中没有文本，就将其视为行内图像（或其他内容），因此将vertical-align设置为“基准”（或文本底部或其他内容）而不是“底部”。

解决方案：

要更正此问题，请vertical-align: bottom;在您的内部div上进行设置。绝对不需要像其他提到的那样在其中放置空格或不可见元素（但这也将是（丑陋的）解决方案）

2020-05-16