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:
| normal | The line-height is generally 1.2 times of its font-size. This is the default value. |
| number | The 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. |
| length | Specifies line-height in ‘px’, ’em’, ‘rem’, ‘cm’, etc. |
| percentage | Sets the line-height in percentage. The line-height is calculated by multiplying the percentage value with the current font-size of the element. |
| initial | Sets the line-height property to its default value(‘normal’). |
| inherit | Inherits the line-height from the parent element. |
General Info
| Default Value | normal |
| Inherited | Yes |
| JavaScript Usage | element.style.lineHeight = “1.5” |
