嵌套项的行高对父行具有相同行高的影响

Question

在以下示例中，按钮和其中的图标都具有相同的line-height，但图标会强制按钮height变得大于其line-height。通过缩小图标的font-size或line-height，可以从按钮中删除此额外高度。为什么是这样？为什么嵌套了相同的line-height会导致包含它的元素的height增加？

注意：我不是在寻找修复它的黑客，而是要了解它为什么会发生。

.Button,
.Button-icon {
  line-height: 68px;
}

.Button {
  padding: 0 5px;
  font-size: 30px;
  border: none;
}

.Button-icon {
  line-height: 68px;
  font-size: 50px;
  display: inline-block;
}

<button class="Button">
   Sad Face <span class="Button-icon">☹</span>
</button>