Firefox/Chrome 空标签内容位置故障/错误 [重复]答案

【问题标题】：Firefox/Chrome empty label content position glitch/bug [duplicate]Firefox/Chrome 空标签内容位置故障/错误 [重复]
【发布时间】：2019-02-07 23:54:46
【问题描述】：

如何将这些红框排成一行？中间一个无缘无故跳下来。

nav label {
  width: 50px;
  height: 50px;
  display: inline-block;
  background-color: red;
}

<nav>
  <label></label>
  <label>2</label>
  <label></label>
</nav>

我需要将空标签保留为空。

【问题讨论】：

标签： html css

【解决方案1】：

您需要设置vertical-align 并更改其baseline 的默认值，这是不想要的结果背后的原因，例如top:

nav label {
  width: 50px;
  height: 50px;
  display: inline-block;
  vertical-align: top; /* or "middle", "bottom" */
  background-color: red;
}

<nav>
  <label></label>
  <label>2</label>
  <label></label>
</nav>

【讨论】：

谢谢。我被这个惊呆了。
没问题，很高兴为您提供帮助。否则这不是错误，它只是基线的默认行为或效果，其中非空标签通过其内容的底线与其他兄弟对齐，这称为基线。或者换句话说，文字就在上面。
@user619271 另一个魔术技巧是将overflow: auto; 添加到中间元素，这将使基线成为底部（与其他元素一样）并且无需调整垂直对齐
你说得对@TemaniAfif