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
Computed value
For <length> and <percentage> the absolute value; otherwise as specified
Animatable
Yes
JavaScript syntax
object.style.lineHeight

Interactive Demo

The rusty swing set creaked a lonely lullaby in the twilight, shadows lengthening like grasping fingers across the dew-kissed grass. A lone dandelion seed, adrift on the breeze, whispered secrets of faraway fields, of dandelion suns and galaxies spun from fluff. Somewhere, beyond the veil of dusk, a coyote laughed, echoing through the stillness like a forgotten memory.

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

The following table will show you the current browser support for the CSS line-height property.

Desktop
Edge Chrome Firefox Opera Safari
121171
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
18410.1114.4

Last updated by CSSPortal on: 2nd January 2024