W3C home > Mailing lists > Public > www-style@w3.org > December 2014

Re: Option so line-height only affects height between lines

From: Gérard Talbot <www-style@gtalbot.org>
Date: Mon, 08 Dec 2014 15:54:31 -0500
To: Ben Sciascia <ben.sciascia@sciascia.co.nz>
Cc: W3C www-style mailing list <www-style@w3.org>
Message-ID: <cb005f18374f80aa47f0d3350225dc16@gtalbot.org>
Le 2014-12-01 14:49, Ben Sciascia a écrit :
> 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
> 

Are you saying the headlines are on the left-hand (or on the right-hand) 
side of other non-headline text elements? What do you do? Are you using 
a table element?

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

Please create a *_simple and reduced test page_* illustrating, 
demonstrating the issue you describe and upload it somewhere so that we 
can examine your code.

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

Visually grouped how? Horizontally? Again, please create a reduce test 
page illustrating the issue.

I'm only trying to better understand your description alongside with 
what you code exactly.

Gérard

> 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.
Received on Monday, 8 December 2014 20:55:04 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:49 UTC