JavaScript EditorBest javascript editor debugger     Ajax website 

Main Page

Previous Page
Next Page

Setting the Line Height

Line height refers to a paragraph's leading, that is, the amount of space between each line in a paragraph. Using a large line height can sometimes make your body text easier to read. A small line height for headers (with more than one line) often makes them look classier.

Figure 10.19. Assuming a default body element of 16 pixels, the font size of the p element will be 87% or about 14 pixels. The line height will be 170% of those 14 pixels, or about 24 pixels.

To set the line height:

Type line-height:.

Type n, where n is a number that will be multiplied by the element's font size (see page 156) to obtain the desired line height.

Or type p%, where p% is a percentage of the font size.

Figure 10.20. Spacing out the lines makes them more attractive and easier to read.

Or type a, where a is an absolute value in pixels, points, or whatever.


  • You can specify the line height together with the font family, size, weight, style, and variant, as described on page 159.

  • If you use a number to determine the line height, this factor is inherited by all child items. So if a parent's font size is 16 pixels and the line height is 1.5, the parent's line height will be 24 (16 x 1.5). If the child's font size is 10, its line height will be 15 (10 x 1.5).

  • If you use a percentage or em value, only the resulting size (or "computed value") is inherited. So, given a parent at 16 pixels with a line height of 150%, the parent's line height will still be 24 pixels. However, all child elements will also inherit a line height of 24 pixels, regardless of their font size.

Previous Page
Next Page

JavaScript EditorBest javascript editor debugger     Ajax website