CSS line-height Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

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

HTML

<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>

CSS

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

Result

Editor

Browser Support

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

Desktop

12	1	1	7	1

Tablets / Mobile

18	4	10.1	1	1	4.4

Last updated by CSSPortal on: 2nd January 2024

Support Us