CSS

line-height

Property

Example

Set the line height for different <div> elements:

div.a {
  line-height: normal;
}

div.b {
 
line-height: 1.6;
}

div.c {
  line-height:
80%;
}

div.d {
  line-height: 200%;
}

Try it Yourself »

More “Try it Yourself” examples below.

Definition and Usage

The line-height property specifies the
height of a line.

Note: Negative values are not allowed.

Show demo ❯

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
Demo

normal
A normal line height. This is default
Demo ❯
number
A number that will be multiplied with the current
font-size to set the line height
Demo ❯
length
A fixed line height in px, pt, cm, etc.
Demo ❯
%
A line height in percent of the current font
size
Demo ❯

initial
Sets this property to its default value. Read about initial

inherit
Inherits this property from its parent element. Read about inherit

More Examples

Example

Set the line height in pixels and centimeters for different <div> elements:

div.a {
  line-height: 10px;
}

div.b {
  line-height: 30px;
}

div.c {
  line-height:
0.5cm;
}

div.d {
  line-height: 1cm;
}

Try it Yourself »

Example

Set the line height as a number for different <div> elements:

div.a {
  line-height: 0.5;
}

div.b {
  line-height: 1.6;
}

div.c {
  line-height: 2;
}

Try it Yourself »

Related Pages

CSS tutorial: CSS Text Spacing

HTML DOM reference:
lineHeight property