Section 18.7. Line Height

18.7. Line Height

In CSS, the line-height property defines the minimum distance between the baselines of adjacent lines of text. A baseline is the imaginary line upon which the bottoms of characters sit. Line height is analogous to leading or interlinear space (the amount of space between lines) in traditional typesetting. Adjusting the line height can change the color of a block of text. In this case "color" refers not to hue (like blue or green), but rather the overall density or darkness of the text.

This section looks at both the line-height property and the method by which CSS calculates the actual height of lines. CSS line height handling has an impact on vertical alignment within text, discussed later.

line-height

---

Values:

     normal | <number> | <length> | <percentage> | inherit 

Initial value:

     normal 

Applies to:

All elements

Inherited:

Yes

These examples demonstrate three alternative methods for specifying the same amount of line spacing. If the font size is 10 pixels, the resulting line height for each of the examples listed would be 20 pixels. Figure 18-11 shows the results (bottom) compared to a paragraph with the default line height (top).

     p.open {line-height: 2; }     /* uses a scaling factor */     p.open {line-height: 2em; }   /* unit of length */     p.open {line-height: 200%; }  /* percentage */ 

The default value is normal, which most browsers display at 120% of the font size. When a number is specified alone (as in the first example), it acts as a scaling factor that is multiplied by the current font size to calculate the line-height value. Line heights can also be specified using any of the length units. Relative values (em, ex, and %) are calculated by the font size of the element. Negative values are allowable and will cause the lines of text to overlap.

It is important to note that child elements inherit the computed line height value from their parent element, not the specified value. For example, the line height for

Figure 18-11. The line-height property

a div with a font size of 12 and a line height of 1 em calculates to 12 pixels. A paragraph element that is the child of that div will inherit the 12-pixel line height, not the relative 1 em value. If that paragraph happens to have a font size larger than 12 pixels, the lines of text will overlap.

The same is not true for scaling factors . When you specify a numerical scaling factor, that value is applied to the selected element and all of its child elements.

18.7.1. Calculating Line Height

Although specifying line heights numerically is fairly straightforward, it is worthwhile to take a look under the hood to see how CSS is actually handling the calculation.

The difference between the line height and the font size values is the leading . Half of the leading is applied above the text's content area and the other half is placed below. The net result is the same as the baseline-to-baseline measurement for line height. Figure 18-12 shows how leading is distributed for text with a font size of 14 pixels and a line height of 22 pixels.

Figure 18-12. Line height and leading

When there is an odd number of pixels, the user agent decides where the larger value is placed (although, most place the extra pixel below the content area).

The text 's content area plus its leading form an implied inline box, which is the total amount of vertical space the text occupies in a line. Being able to visualize the inline box will come in handy later when we discuss vertical alignment.