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
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.)
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?