Option so line-height only affects height between lines

Line-height in CSS not only affects the height between lines of text, it also alters the space above and below elements.

This creates a situation similar to the old box model when padding also affected width - changing line-height in CSS can require us to also alter top and bottom margins or padding.



USE-CASE #1: Top edges of headlines need to line-up with top edges of other elements

Because line-height also adds space above the headline, headlines often fail to line up with other elements.

This forces us to compensate with negative margins - and if the line height is changed, the compensating adjustments also requiring updating, creating unnecessary work.



USE-CASE #2: Headlines need to be visually grouped with paragraphs

If the design requires that headlines be visually grouped with paragraphs, less space is required between the headline and paragraph and more space before the paragraph.

But because line-height is also affecting the space between the headline and the paragraph, line-height on larger headlines (like h1s and h2s) create a space that’s too big. 

Reducing line-height reduces the space but it also forces lines in multi-line headlines to bleed together. Adding negative margin to compensate quickly becomes painful if the line-height is adjusted - again, the designer is adjusting multiple properties instead of one.



CONCLUSION:

Overall, this suggestion is about creating an additional line-height property that forces line-height to only affect the height between lines and not the space before and after elements.



Regards,

Ben


___

Ben Sciascia

Sciascia Brothers
Level 1, 56 Brown Street, Ponsonby
PO Box 68-578 Newton,
Auckland, New Zealand

PH: +649 360 0559
FAX: +649 360 0012
MOB: +64 21 44 33 66

www.sciascia.co.nz

ben.sciascia@sciascia.co.nz

WARNING: This e-mail contains information which is CONFIDENTIAL and may be subject to LEGAL PRIVILEGE. If you are not the intended recipient, you must not peruse, use, disseminate, distribute or copy the e-mail or attachments.  If you have received this message in error, please telephone us immediately and destroy the original message.