CSS line-height Property

CSS line-height property specifies the height of a line of text. The line-height property is generally used to set vertical spacing between different lines of text.

The line-height can be specified in any valid CSS length format such as ‘px’, ’em’, ‘rem’, ‘cm’, etc. It can also be specified in % and can also accept an absolute number. See the the example below:

Example:

.p1{
   line-height: 10px;
}
.p2{
   line-height: 20px;
}
.p3{
  line-height: 30px;
}

You should always prefer a unitless number to set the line-height. As other formats like ‘px’, ‘cm’, ‘rem’, etc. can cause unexpected results. Try out the example below for a clear understanding:

Example:

.div1{
  line-height: 15px;
}
.div2{
  line-height: 1.5;
}

The line-height property can also be used to align text vertically.

To vertically align the text, make the line-height same as the height of the element. See the example below:

Example:

div{
   height: 100px;
   line-height: 100px;
}

CSS Syntax

The line-height property has the following syntax:

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

Property Values

The line-height property accepts the following values:

General Info