为何font-size大于0会增加Web Component（HTML自定义元素）的额外高度？

现象说明 #

同一自定义元素<my-elm1>，内部包含固定尺寸（48px×48px）的SVG：

• 左侧元素使用默认font-size:0，高度正常匹配SVG尺寸
• 右侧元素设置font-size:2rem，整体高度比左侧多出8px（恰好是32px字体大小的1/4）；若设置font-size:1rem，高度差缩小至4px
• 额外高度均来自自定义元素底部，SVG本身高度始终为48px
• 该问题可在Windows11系统的最新版Chrome和Firefox中复现

相关代码 #

自定义元素模板 #

<template id="t1">
  <svg viewbox="0 0 16 16" width="48" height="48">
    <rect width="16" height="16"/>
  </svg>
</template>

页面结构 #

<div>
  <label for="elm">&lt;svg&gt;:</label>
  <my-elm1 id="elm"></my-elm1>
  <span>span</span>
  <my-elm1 id="elmXtra" style="font-size:2rem;"></my-elm1>
</div>

疑问 #

为何设置大于0的font-size会增加自定义元素的整体高度？目前只能通过在CSS中强制设置font-size:0来避免继承父元素或全局的非零字体大小，从而消除额外高度的问题。

内容的提问来源于stack exchange，提问作者Sideways S