How to deal with extra spacing with line-height when spacing between elements should be consistent

We want to design our website so that all elements are spaced 24px apart (paragraphs, form groups, header & content, etc.) and "related" elements (label & form field) are spaced 8px apart. We are doing this with flex gap which works well (we built a polyfill for browsers that don't support this).

This works great for non-text elements. But for paragraphs and headers, a line-height > 1 results in additional spacing between the element before and the visual start of the text. The images below are a div, p, and div w/ row-gap:24px.

demonstration of line-height 1 demonstration of line-height 1.5 demonstration of line-height 2

Having this increased space between elements goes against the style (my boss is a real stickler on consistent spacing and will often open up Photoshop to count the pixels). To avoid this problem, we add psudo-elements to every text element with negative margins to compensate for the top and bottom white space. (If CSS supported a leading property, this would be easier as it would change the actual spacing between lines of text vs increasing the height of each line.)

enter image description here enter image description here

Looking at other sites, I often see a mess of margins and paddings of all different values. Nothing which makes a whole lot of logical sense. Do these developers just keep messing with the numbers until it looks good vs having some standard components to work with?

Perhaps our design/strategy is flawed in some fashion? Is it good that a increased font-size (and line-height increasing as well) would warrant more spacing between elements?

How do you guys deal with the extra spacing caused by line-height > 1?

Tags: