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 values */ 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;
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. <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 and em values may have 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.
.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; }
<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 -->
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 (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 1.0[1] | (Yes) | 1.0 (1.7 or earlier) | 4.0[1] | 7.0 | 1.0[1] |
Feature | Android | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | 1.0[1] | (Yes) | 1.0 (1) | 6.0[1] | 6.0 | 1.0[1] |