html - 为什么将 line-height 设置为与 content height 相同的文本垂直居中？

Question

我想了解 CSS 中的行高属性是如何工作的。我知道它设置了文本行之间的间距。我不明白的是，为什么当您将 line-height 设置为与容器的高度相同时，它会垂直对齐文本。例如，如果您这样做:

.btn {
height: 22px;
line-height: 22px;
}

然后创建一个带有“btn”类的元素，该元素中的文本将垂直居中对齐，我不明白为什么。对我来说，第一行文本出现在容器的最顶部更有意义，第二行出现在底部，可能溢出，因为那将向下 22px。有人可以告诉我为什么它会这样工作吗，因为除非对此进行解释，否则我觉得我无法完全理解 line-height 属性。谢谢。

Answer 1

行高是元素上方和下方的空间量。我能告诉你的几乎就是这些。