svg - Why does font-size > 0 add extra height to web component aka HTML custom element? - Stack Overflow

I can't get this to work in a snippet here, so here's my test page on my github pages site: .html

Note the top row labeled <svg>:, the two rectangles. They are the same custom element tag with different font-sizes. The left rectangle uses the CSS default of font-size:0, the right one uses font-size:2rem. The difference in height between the two is 8px, which is 1/4 of the 32px font size. If you set the height to 1rem then the height difference shrinks to 4px.

Here is a screenshot with the elements' padding set to zero, so that the extra height is easily visible:

This is the template:

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

This is the <div> in question:

<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>

Not much to it. The <svg> is 48px tall in both cases. The extra height is all in the custom element, and all at the bottom of the element.

I can reproduce this in the latest versions of Chrome and Firefox on Windows 11. Why does setting a font-size greater than zero add height to this custom element? It forces me to hard set font-size:0 in CSS, otherwise it tends to inherit something > 0.

If it helps, source code is here, two files: wc-bugs.html and wc-bugs.js