RE: [css21] line-height, problem?

I answered your question below in a prior message, but just in case look below.

Steve Z.

-----Original Message-----
From: a.fedoniouk@gmail.com [mailto:a.fedoniouk@gmail.com] On Behalf Of Andrew Fedoniouk
Sent: Monday, November 26, 2012 8:35 PM
To: www-style@gtalbot.org
Cc: www-style mailing list
Subject: Re: [css21] line-height, problem?

On Mon, Nov 26, 2012 at 6:45 PM, "Gérard Talbot" <www-style@gtalbot.org> wrote:
>
> Le Lun 26 novembre 2012 19:35, Andrew Fedoniouk a écrit :
>> Consider these two properties:
>>
>> 'min-height' specifies the minimal height [of an element].
>> 'line-height' specifies the minimal height of line boxes.
>>
>> Seems like both define same concept - they constrain the height to a 
>> certain minimal value that computed value of height may use.
>>
>> By defining min-height you *cannot* make elements smaller, only larger.
>
> You can define the min-height of an element to be larger than its 
> content in which case, there will be vertical gaps. I can create a 
> test which would verify, demonstrate and test this.
>
...
>
>> But by defining line-height you can make line-box smaller than its 
>> content.
>
> line-height is inherited: so, inline elements inside a block all have 
> an line-height specified value.

Consider this:

<p style="line-height:10px">ABC</p>

What exactly is inherited here?  And by whom?

There is no other element inside that paragraph except of single text node with three characters. That text node has height determined by the font used. And that height is the content height (a.k.a. normal height) of single line box in that paragraph.
SZ: you noted that there are three characters. It is these 3 characters which inherit 'line-height' which defines the "leading" (1/2 above and 1/2 below) that applies to each of them. It is then these "leaded" characters (or more appropriately their corresponding glyphs) that determine the line height. The 'line-height' value on the paragraph also determines the minimum height of each line needed to display the content of the paragraph. In this case, it is most likely that all three characters appear on the same line and each characters 'line-height' is the same as that of the paragraph, so the height of the line that contains them is the same as line height. If the 'font-size' were 20px, then the "leading" would be negative (-5px above the text and -5px below) so the height of the line would be 10px which is exactly what you asked for (although you, perhaps, did not see it that way). 

Jeez, what exactly that "minimal line height" means?
It means that not line will have less height than the minimum. It does not mean that each line will (necessarily) have more height than the minimum. (This seems to be where you are confused.)

--
Andrew Fedoniouk.

http://terrainformatica.com

Received on Tuesday, 27 November 2012 05:46:40 UTC