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 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, set 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:

normalThe line-height is generally 1.2 times of its font-size. This is the default value.
numberThe line-height is calculated by multiplying the given number with the current font-size of the element. This is the preferred way to set the line-height.
lengthSpecifies line-height in ‘px’, ’em’, ‘rem’, ‘cm’, etc.
percentageSets the line-height in percentage. The line-height is calculated by multiplying the percentage value with the current font-size of the element.
initialSets the line-height property to its default value(‘normal’).
inheritInherits the line-height from the parent element.

General Info

Default Valuenormal
InheritedYes
JavaScript Usageelement.style.lineHeight = “1.5”