We want to design our website so that all elements are separated 24px (paragraphs, groups of forms, header and content, etc.) and the "related" elements (label and form field) are separated 8px. We are doing this with Flex gap that works well (we create a polyfill for browsers that do not support it).
This works great for items that are not text. But for paragraphs and headings, a
line-height > 1 results in an additional space between the previous element and the visual start of the text. The images below are a
div w /
Having this greater space between the elements goes against the style (my boss is very demanding with constant spacing and often opens Photoshop to count the pixels). To avoid this problem, we add psudo elements to each text element with negative margins to compensate for the upper and lower white space. (If CSS supports a
leading property, this would be easier since it would change the actual space between lines of text instead of increasing the height of each line).
When looking at other sites, I often see a mess of margins and fills of all different values. Nothing that makes much logical sense. Do these developers keep playing with the numbers until it looks good instead of having some standard components to work with?
Perhaps our design / strategy is defective in some way? Is it good that a larger font size (and an increase in line height too) guarantees more space between the elements?
How do you handle the extra space caused by
line-height > 1?