当父 div 包含另一个带有 display: inline-block 的空 div 时，父 div 高度不正确，

Question

我遇到了父 div 高度大于内容的问题，我试图了解原因。

特别是子 div 有 display: inline-block 并且没有内容。 padding、margin、border都是0；

有趣的是，添加任何内容，甚至是 nbsp，都可以解决问题。

这是浏览器错误还是设计使然？

why parent div height is larger than child div?
<div style="background-color:red;">
  <div style='background-color:blue; width:32px; height:32px; display:inline-block'></div>
</div>

<hr>

adding any content fixes sizing
<div style="background-color:red;">
  <div style='background-color:blue; width:32px; height:32px; display:inline-block'>
    x
  </div>
</div>

& nbsp; works too

<div style="background-color:red;">
  <div style='background-color:blue; width:32px; height:32px; display:inline-block'>&nbsp;</div>
</div>

Answer 1

这是设计使然，与基线对齐有关。要了解正在发生的事情，请在容器中添加更多文本

why parent div height is larger than child div?
<div style="background-color:red;">
  <div style='background-color:blue; width:32px; height:32px; display:inline-block'></div>
  p
</div>

<hr>

adding any content fixes sizing
<div style="background-color:red;">
  <div style='background-color:blue; width:32px; height:32px; display:inline-block;color:#fff'>
    x
  </div>
  p
</div>

& nbsp; works too

<div style="background-color:red;">
  <div style='background-color:blue; width:32px; height:32px; display:inline-block;color:#fff'>&nbsp;</div>
  p
</div>

在这 3 种情况下，inline-block 与基线对齐，但空的 inline-block 元素的基线是它的底部边缘，因此您有用于下降的底部空间。

'inline-block' 的基线是其在正常流中的最后一个行框的基线，除非它没有流内行框或者它的 'overflow' 属性具有除 'visible 之外的计算值'，在这种情况下，基线是底部边距边缘。 ^ref

如果你添加oveflow:hidden，你也会在这3种情况下遇到这个问题

why parent div height is larger than child div?
<div style="background-color:red;">
  <div style='background-color:blue; width:32px; height:32px; display:inline-block;overflow:hidden'></div>
  p
</div>

<hr>

adding any content fixes sizing
<div style="background-color:red;">
  <div style='background-color:blue; width:32px; height:32px; display:inline-block;color:#fff;overflow:hidden'>
    x
  </div>
  p
</div>

& nbsp; works too

<div style="background-color:red;">
  <div style='background-color:blue; width:32px; height:32px; display:inline-block;color:#fff;overflow:hidden'>&nbsp;</div>
  p
</div>

为避免这种情况，您只需将对齐更改为不同于基线的内容：

why parent div height is larger than child div?
<div style="background-color:red;">
  <div style='background-color:blue; width:32px; height:32px; display:inline-block;overflow:hidden;vertical-align:top;'></div>
  p
</div>

<hr>

adding any content fixes sizing
<div style="background-color:red;">
  <div style='background-color:blue; width:32px; height:32px; display:inline-block;color:#fff;overflow:hidden;vertical-align:top;'>
    x
  </div>
  p
</div>

& nbsp; works too

<div style="background-color:red;">
  <div style='background-color:blue; width:32px; height:32px; display:inline-block;color:#fff;overflow:hidden;vertical-align:top;'>&nbsp;</div>
  p
</div>

相关：

Why is this inline-block element pushed downward?

Image inside div has extra space below the image