The line-height
CSS property sets the amount of space used for lines, such as in text. On block-level elements, it specifies the minimum height of line boxes within the element. On non-replaced inline elements, it specifies the height that is used to calculate line box height.
/* Keyword value */ line-height: normal; /* Unitless values: use this number multiplied by the element's font size */ line-height: 3.5; /* <length> values */ line-height: 3em; /* <percentage> values */ line-height: 34%; /* Global values */ line-height: inherit; line-height: initial; line-height: unset;
<div class="grid"> <div class="row"> <div class="cell">line-height: normal <p class="normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur tristique libero ultrices luctus.</p> </div> <div class="cell">line-height: 1.2 <p class="number">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur tristique libero ultrices luctus.</p> </div> <div class="cell">line-height: 21px <p class="size">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur tristique libero ultrices luctus.</p> </div> <div class="cell">line-height: 150% <p class="percent">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur tristique libero ultrices luctus.</p> </div> </div> </div>
html, body { height: 100%; box-sizing: border-box; background: #EEE; } .grid { width: 100%; height: 100%; display: flex; font: 1em monospace; } .row { display: flex; flex: 1 auto; flex-direction: row; flex-wrap: wrap; } .col { display: flex; flex: 1 auto; flex-direction: column; } .cell { margin: .5em; padding: .5em; background-color: #FFF; overflow: hidden; text-align: center; flex: 1; white-space: nowrap; } .note { background: #fff3d4; padding: 1em; margin: .5em; font: .8em sans-serif; text-align: left; flex: 1; white-space: nowrap; } p { font-family: sans-serif; background: #E4F0F5; padding: .5em; margin: .5em; text-align: left; white-space: normal; } .normal { line-height: normal; } .number { line-height: 1.2; } .size { line-height: 21px; } .percent { line-height: 150%; }
Initial value | normal |
---|---|
Applies to | all elements. It also applies to ::first-letter and ::first-line . |
Inherited | yes |
Percentages | refer to the font size of the element itself |
Media | visual |
Computed value | for percentage and length values, the absolute length, otherwise as specified |
Animation type | either number or length |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Syntax
The line-height
property is specified as any one of the following:
- a
<number>
- a
<length>
- a
<percentage>
- the keyword
normal
.
Values
normal
- Depends on the user agent. Desktop browsers (including Firefox) use a default value of roughly
1.2
, depending on the element'sfont-family
. <number>
- The used value is this unitless
<number>
multiplied by the element's own font size. The computed value is the same as the specified<number>
. In most cases, this is the preferred way to setline-height
and avoid unexpected results due to inheritance. <length>
- The specified
<length>
is used in the calculation of the line box height. Values given in em units may produce unexpected results (see example below). <percentage>
- Relative to the font size of the element itself. The computed value is this
<percentage>
multiplied by the element's computed font size. Percentage values may produce unexpected results (see the second example below).
Formal syntax
normal | <number> | <length> | <percentage>
Examples
Basic example
/* All rules below have the same resultant line height */ div { line-height: 1.2; font-size: 10pt; } /* number */ div { line-height: 1.2em; font-size: 10pt; } /* length */ div { line-height: 120%; font-size: 10pt; } /* percentage */ div { font: 10pt/1.2 Georgia,"Bitstream Charter",serif; } /* font shorthand */
It is often more convenient to set line-height
by using the font
shorthand as shown above, but this requires the font-family
property to be specified as well.
Prefer unitless numbers for line-height values
This example shows why it is better to use <number>
values instead of <length>
values. We will use two <div>
elements. The first, with the green border, uses a unitless line-height
value. The second, with the red border, uses a line-height
value defined in em
s.
CSS
.green { line-height: 1.1; border: solid limegreen; } .red { line-height: 1.1em; border: solid red; } h1 { font-size: 30px; } .box { width: 18em; display: inline-block; vertical-align: top; font-size: 15px; }
HTML
<div class="box green"> <h1>Avoid unexpected results by using unitless line-height.</h1> length and percentage line-heights have poor inheritance behavior ... </div> <div class="box red"> <h1>Avoid unexpected results by using unitless line-height.</h1> length and percentage line-heights have poor inheritance behavior ... </div> <!-- The first <h1> line-height is calculated from its own font-size (30px × 1.1) = 33px --> <!-- The second <h1> line-height results from the red div's font-size (15px × 1.1) = 16.5px, probably not what you want -->
Result
Specifications
Specification | Status | Comment |
---|---|---|
CSS Transitions The definition of 'line-height' in that specification. |
Working Draft | Defines line-height as animatable. |
CSS Level 2 (Revision 1) The definition of 'line-height' in that specification. |
Recommendation | No change. |
CSS Level 1 The definition of 'line-height' in that specification. |
Recommendation | Initial definition. |
Browser compatibility
Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 1 | 12 | 1 | 4 | 7 | 1 |
Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
---|---|---|---|---|---|---|---|
Basic support | 1 | Yes | 12 | 4 | 6 | 6 | 1 |