How do I use the line-height property?
Author: Deron Eriksson
Description: This CSS tutorial describes the line-height property.
Tutorial created using: Windows XP


Page:    1 2 >

If the line-height property is specified for an inline non-replaced element, it will specify the height of the generated box for the inline element. If the property is specified for a block element that contains inline elements, it specifies the minimal height of the each inline box.

The line-height property can be set to "normal", "inherit", a number, a percentage, or a length. The default value for the line-height property is "normal", which sets the line height to a "normal" level, which typically is around 1.2 times the value of the font size. If the value is a number or a percentage, the computed value of the line-height is the element's font size multiplied by the number or the percentage. If the value is a length, the line-height is simply that length. The numbers, percentages, and lengths can't be negative.

In general, it tends to be good practice to set the line-height to a value that scales according to the font-size (such as setting it to 1.5em) rather than setting it to a fixed size (such as 16px). This can prevent text on different lines from overlapping.

(Continued on page 2)

Page:    1 2 >