CSS line-height Property


Example

Set the line height in percent:

p.small {
    line-height: 90%;
}

p.big {
    line-height: 200%;
}

Try it yourself »

More "Try it Yourself" examples below.


Definition and Usage

The line-height property specifies the line height.

Note: Negative values are not allowed.

Default value: normal
Inherited: yes
Animatable: yes. Read about animatable Try it
Version: CSS1
JavaScript syntax: object.style.lineHeight="30px" Try it


Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
line-height 1.0 4.0 1.0 1.0  7.0


CSS Syntax

line-height: normal|number|length|initial|inherit;

Property Values

Value Description Play it
normal A normal line height. This is default Play it »
number A number that will be multiplied with the current font size to set the line height Play it »
length A fixed line height in px, pt, cm, etc. Play it »
% A line height in percent of the current font size Play it »
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit


Examples

More Examples

Example

Specify the space between the lines in two paragraphs using a pixel value.

p.small {
    line-height: 10px;
}

p.big {
    line-height: 30px;
}

Try it yourself »

Example

Specify the space between the lines in two paragraphs using a number value.

p.small {
    line-height: 0.5;
}

p.big {
    line-height: 2;
}

Try it yourself »


Related Pages

CSS tutorial: CSS Text

HTML DOM reference: lineHeight property



Color Picker

colorpicker