O'Reilly logo

CSS Pocket Reference, 4th Edition by Eric A. Meyer

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Name

line-height

Values:

<length> | <percentage> | <number> | normal | none

Initial value:

normal

Applies to:

All elements (but see text regarding replaced and block-level elements)

Inherited:

Yes

Percentages:

Relative to the font size of the element

Computed value:

For length and percentage values, the absolute value; otherwise, same as declared value

Description:

This property influences the layout of line boxes. When applied to a block-level element, it defines the minimum (but not the maximum) distance between baselines within that element. When applied to an inline element, it is used to define the leading of that element.

The difference between the computed values of line-height and font-size (called “leading” in CSS) is split in half and added to the top and bottom of each piece of content in a line of text. The shortest box that can enclose all those pieces of content is the line box.

A raw number value assigns a scaling factor, which is inherited instead of a computed value. Negative values are not permitted.

Examples:

p {line-height: 1.5em;}
h2 {line-height: 200%;}
ul {line-height: 1.2;}
pre {line-height: 0.75em;}

Note:

The keyword none was added in CSS3 and is not supported as of early 2011.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required