没有文本的inline-block元素呈现不同 [英] inline-block element with no text renders differently

问题描述

 < 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中没有​​文本，它就像一个内联图像（或其他），因此它的垂直-align设置为基线（或文本底或任何内容），而不是底部。

解决方案：

以纠正错误，在内部div上设置 vertical-align：bottom; 。绝对没有必要把一个空格或不可见的元素，像其他人提到的（但这将是一个（丑陋的）解决方案）

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

When rendered in FF or Chrome the height of the red div is 26px, whereas the height of the yellow div is 20px. How can I make the red div render the same as the yellow div, but without it containing any text?

解决方案

just a thought:

as long as there's no text in the div, it's treated like a inline-image (or something else), and so it's vertical-align is set to 'baseline'(or text-bottom or whatever) instead of 'bottom'.

the solution:

to correct that, set vertical-align: bottom; on your inner divs. there's absolutely no need to put a space or invisible element into it, like others mentioned (but that would be an (ugly) solution, too)

这篇关于没有文本的inline-block元素呈现不同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！