spanタグで上下の謎の空白が生じて、font-sizeと高さが合わないのはなぜですか？

inline-blockやblock要素に変更するでいいと思います

調査経過報告：

以下、stackoverflowで同じような質問があったが、これはinline-blockを用いて対応している。

以下に参考になる回答があった。
私がここで削除したい余分な高さは、本来文字が持つ高さであり、それは一般的にfont-sizeの1.2倍である（フォントによって異なる）。

The browser is not adding any padding. Instead, letters (even uppercase letters) are generally considerably smaller in the vertical direction than the height of the font, not to mention the line height, which is typically by default about 1.2 times the font height (font size).
There is no general solution to this because fonts are different. Even for fixed font size, the height of a letter varies by font. And uppercase letters need not have the same height in a font.
Practical solutions can be found by experimentation, but they are unavoidably font-dependent. You will need to set the line height essentially smaller than the font size. The following seems to yield the desired result in different browsers on Windows, for the Arial font:

私が質問した例にあるNoto Sans JPは、30pxを指定した際は高さが44px、10pxの場合は15pxなので、約1.5倍の高さを占領する様子。

なぜspanタグの場合、余分な領域が発生するのか？

おっしゃる通り、本来文字が持つ高さになります。

アクセシビリティを考慮するとline-hightは1.5が好ましいそうです。

font-sizeと同じ高さにするためのベストな方法

これがやりたいこととあっているかわかりませんが、
display 以外でやるとしたら、 line-heightを 1 or 100%と指定する方法でも
フォントサイズと同じ高さにできると思います。

.style {
  line-height: 1;
}

or

.style {
  line-height: 100%;
}

inlineだと、line-height: 1を指定してもfont-size以上の高さになる。

cssハックが必要な部分として昔話題になった内容です。
親要素をfont-size:0;にしてみてください
使用する箇所によっていろいろな問題点もあるようですが、レイアウト的に若干の調整が必要な時は今でも使ってます