如何计算css中一个行框高度的高度？

Question

我对这个白色空间感到困惑。当我在chrome devtools上使用检查工具时，所选区域就是这样。

但是，当我使用光标选择这个区域时。它会是这样的。

我的字体指标是这样的。

为什么在＆＃34; MO＆＃34;的顶部有一个空白区域。我认为图片将在＆＃34; MO＆＃34;顶部，不高于顶部。为什么？

我的代码就像这样

＆＃13;

＆＃13;

p {
  font-size: 100px
}

.b {
  font-family: hhnormal
}

@font-face {
  font-family: 'hhnormal';
  src: url('./fontfamily/CAbnormal.ttf') format('truetype');
}

＆＃13;

<p>
  <span class="b">MO</span><img style="font-size:0px;height:100px;vertical-align:text-top;" src="https://ss0.baidu.com/73x1bjeh1BF3odCf/it/u=1017087508,1225706513&fm=85&s=FAC1B1404FB4B24F5E51E4070000E0C9" alt="">

</p>

＆＃13;

＆＃13;

＆＃13;