The CSS property of line-height is
The font-size for this paragraph is set at 30px to pin it down for this demo. This is big text and needs appropriate space between lines when it wraps. This paragraph's line-height is 1.2, inherited from the parent div. The font-size multiplied by 1.2 causes a line-height of 36px. The multiplier acts locally and appropriately. It ignores the font-size set for the parent. It looks roughly right for the eye.
The font-size for this paragraph is set at 16px to pin it down for this demo. This is in the ballpark of normal content text (normally better set with em, as is all text). This particular paragraph's line-height is 1.2, inherited from the parent div. The font-size for the paragraph multiplied by 1.2 causes a line-height of 19.2px. The multiplier acts locally and appropriately. It ignores the font-size set for the parent. See the source. Roughly right for the eye.
The font-size for this paragraph is set at 30px to pin it down for this demo. This is big text and needs appropriate space between lines. This particular paragraph's line-height of 36px is inherited from the parent div wrapper and means the obvious thing of 36px for the height of the lines. Roughly right for the eye.
The font-size for this paragraph is set at 16px to pin it down for this demo. This is in the ballpark of normal content text. This particular paragraph's line-height of 36px is inherited from the parent div wrapper and means the obvious thing of 36px for the height of the lines. Rather too spaced out! The important point here is that setting a length unit for line-height on a parent makes the children all inherit the same length, which is rarely appropriate. Of course, these values can be over-ridden by further attention of the author to line-height at the paragraph level. But who wants to do that?
The font-size for this paragraph is set at 30px. This is big text and needs appropriate space between lines. This particular paragraph's line-height of 72% is inherited from the parent div. (See the source). The font-size of the parent (which in turn inherited it from higher up) is 50px, which is merely an exaggerated case for the demo here. (The font-size set deliberately for this paragraph is quite different). 72% of 50px is 36px. Roughly right for the eye. Yes, I have manipulated the figures to bring out how a percentage unit is not equivalent to a pure number multiplier. Try .72 of 30px (i.e. this particular para's font-size) and you get a very different result. At the heart of the confusion over this issue is that the multiplier multiplies one number while a percentage is a percentage of quite easily a different number.
The font-size for this paragraph is set at 16px to pin it down for this demo. This is in the ballpark of normal content text (normally better set with em) and needs appropriate space between lines. This particular paragraph's line-height of 72% is inherited from the parent div. This means 72% (unfortunately in this case) of the font-size of the parent of 50px which itself inherited from higher up; resulting in 36px. Quite too much for this paragraph. Yes, I have manipulated the figures to bring out how a percentage unit is not equivalent to a pure number multiplier. Try .72 of 16px (i.e. this paragraph's font-size) and you get a very different result. At the heart of the confusion over this issue is that the multiplier multiplies one number while a percentage is a percentage of quite easily a different number.
The font-size for this paragraph is set at 30px to pin it down for this demo. This is big text and needs appropriate space between lines. This particular paragraph's line-height is inherited from the parent div wrapper's default style sheet, probably a pure multiplier of about 1.2. In other words, no author-set value has been made for this paragraph or the last one or the wrapper for them both. Yet still roughly right for the eye.
The font-size for this paragraph is at 16px to pin it down for this demo. This is in the ballpark of normal content text (normally better set with em) and needs appropriate space between lines. This particular paragraph's line-height is inherited from the parent div's line-height which it either inherited from its parent or else has been set explicitly by the browser default style sheet, probably a pure multiplier of about 1.2. In other words, no author-set value has been made for this paragraph and the last or the wrapper for them both. Yet still roughly right for the eye.