html - 为什么out div的高度受vertical-align影响

Question

在 chrome 中，我认为 .wrap 的高度应该是 24px。 vertial-align 设置为 middle 时为 25px。有人可以解释为什么吗？

在 this article 中回答

body {
  line-height: 1.5;
}

.wrap {
  font-size:16px;  /* 16*1.5= 24 */
}

.btn {
  font-size: 14px;
  padding: 4px;
  line-height: 1;
  box-sizing: border-box;
  border: 1px solid blue;
  vertical-align: middle;
}

<div class="wrap">
  <button class="btn">
    OK
  </button>
</div>

Answer 1

正如解释的那样Here

Aligns the middle of the element with the baseline plus half the x-height of the parent.

您的 .wrap 元素的行高默认为 1.5，它继承自 body，垂直对齐属性将根据您的行高呈现，因此如果行高大于您的包装元素，您将看到效果。要修复它，只需将 line-height 放入您的 .wrap 类中，您可以使用它来查看 line-height 如何影响垂直对齐。

body {
  line-height: 1.5;
}

.wrap {
  line-height:1;
  background:red;
}

.btn {
  font-size: 14px;
  padding: 4px;
  line-height: 1;
  box-sizing: border-box;
  border: 1px solid blue;
  vertical-align: middle;
}

<div class="wrap">
  <button class="btn">
    OK
  </button>
</div>