CSS line-height Property

Description

The line-height property defines the minimum height of a line of text. For embedded string elements (like <img> ), the line-height property has no effect. For the rest of the line elements, line-height sets the height that is used to calculate the height of the line of the block.

Initial value

normal

Applies to

All elements

Inherited

Yes

Media

Visual

Computed value

For <length> and <percentage> the absolute value; otherwise as specified

Animatable

Yes

CSS Version

CSS1, CSS2, CSS3

JavaScript syntax

object.style.lineHeight

Syntax

line-height: normal | <number> | <length> | <percentage> | none

Values

• normalDepends on the user agent. Desktop browsers use a default value of roughly 1.2, depending on the element's font-family.
• <length>The box height is set to this length. Negative values are illegal. The length is the computed value.
• <number>The computed value of the property is this number multiplied by the element's font size. Negative values are illegal. However, the number, not the computed value, is inherited.
• <percentage>The computed value of the property is the percentage multiplied by the element's computed font size. Negative values are illegal.
• inherit

Example

<p class="test">A paragraph that has a line-height: 10px <br> A paragraph that has a line-height: 10px</p> 

<p class="test2">A paragraph that has a line-height: normal <br> A paragraph that has a line-height: normal</p> 

<p class="test3">A paragraph that has a line-height: 150% <br> A paragraph that has a line-height: 150%</p> 

<p class="test4">A paragraph that has a line-height: 2 <br> A paragraph that has a line-height: 2</p> 

.test {
   line-height: 10px;
}
.test2 {
   line-height: normal;
}
.test3 {
   line-height: 150%;
}
.test4 {
   line-height: 2;
}

Browser Support

Desktop
4	12	1	1	7	1
Tablets / Mobile
1	18	4	10.1	1	Yes

Last updated by CSSPortal on: 3rd November 2019