设置vertical-align:middle的span导致父元素高度异常增大问题

我发现一个现象：当在inline/inline-block元素内部的inline或inline-block元素设置vertical-align:middle时，会导致父元素高度发生变化。

测试代码 #

HTML代码

<button id="button-1">
  <span><span class="one">Some text</span></span>
</button>
<button id="button-2">
  <span><span class="two">Some text</span></span>
</button>

CSS代码

button {
  padding: 12px 16px;
  background: blue;
  color: white;
  border-radius: 3px;
  border: 0;
}

span {
  line-height: 24px;
}

.one {
  vertical-align: baseline;
}

.two {
  vertical-align: middle;
}

测试结果 #

button-1的高度为48px，button-2的高度为49.05px。在按钮包含图标+文本这类多元素场景中，通常需要用vertical-align:middle来对齐元素，但这个属性会让按钮内部高度超出设置的24px行高。

虽然可以通过将按钮设置为inline-flex并取消vertical-align的方式解决，但我想知道：能否不使用flexbox，保留vertical-align:middle的同时维持按钮所需高度？

内容的提问来源于stack exchange，提问作者Dzmitry Vasilevsky