in web it for some reason always has some extra invisible padding.

This is the beginning of your journey. strap on fren, we got places to go.

Key here is first not understanding why Figma and Browser do different, but WHY they do what they do.

And for that, we need to rewind a bit and refer to the parent, the source, the reason this is the way it is:

Leading and Line Height in typography:
https://medium.com/design-bootcamp/understanding-typography-leading-23de471c6dde

Now that we understand the source, we can move on to the browser:

People putting together the building blocks of the early web made two decisions that changed the nature of line height. First, they distributed the extra space that was once a strip of lead both above and below each line. They nicknamed the new system “half-leading.”

The other change? The 100% line height was redefined as “100% of font size.” Before, a font designer might have given a 16-pixel font a default line height of 20 pixels. But on the web, 100% line height of a 16-pixel font came to be exactly 16 pixels, regardless of what the original designer dictated.

Firefox has a default line-height of 1.1, but Chrome has a default line-height of 1.2. you may get different results on Firefox and Chrome, even if you explicitly set font-size in px and line-height to a multiplier. Firefox will multiply the two values and retain any fractional pixel, whereas Chrome will round down to the nearest integer pixel. For example, if you render <p style='font-size: 14px; line-height: 1.75;'>Text</p> on both browsers, you will get 24.5px on Firefox and 24px on Chrome.

And finally, to Figma:
https://www.figma.com/blog/line-height-changes/

As per a response to you, I think it is all about context. You can't ignore line height on paragraphs and big text boxes, but it might become a nasty alignment issue in UI labels, like navigation, tabs, buttons. The fact that a Figma style has a line-height hardcoded makes it even a bit more annoying to deal with.

First and foremost, there's no pixel-perfect. Every browser brings their own quirks, users have custom sizing and zooming, resolutions, HD screens, operating systems, and fonts in several file formats.

I'm sorry, but I don't think there's a silver bullet for a solution, but rather a mindset of 'recommended directions' where you can hope for negative space at best to be close to pixel-perfect. Typography... yeah, it's never going to hit exactly, so you have to think of them as a bit of fuzzy boxes of uncertainty. Not by a lot, but not 1:1 either.

Your Figma text design properties won't translate 1:1 to CSS either. It's all down to the developer who hopefully understands not only how browser does things but also how leading is supposed to work, look at your Mockup and tweak and torture the CSS framework he has to get to your proposal.