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;
The line-height
property is specified as any one of the following:
<number>
<length>
<percentage>
normal
.normal
1.2
, depending on the element's font-family
.<number>
(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 set line-height
and avoid unexpected results due to inheritance.<length>
<length>
is used in the calculation of the line box height. Values given in em units may produce unexpected results (see example below).<percentage>
<percentage>
multiplied by the element's computed font size. Percentage values may produce unexpected results (see the second example below).-moz-block-height
normal | <number> | <length> | <percentage>
/* All rules below have the same resultant line height */ div { line-height: 1.2; font-size: 10pt; } /* number/unitless */ 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.
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 -->
Use a minimum value of 1.5
for line-height
for main paragraph content. This will help people experiencing low vision conditions, as well as people with cognitive concerns such as Dyslexia. If the page is zoomed to increase the text size, using a unitless value ensures that the line height will scale proportionately.
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. |
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 |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | 1 | 12 | 1 | 4 | 7 | 1 |
-moz-block-height
|
No | No | 3.6 | No | No | No |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | 1 | Yes | 12 | 4 | 6 | 1 | Yes |
-moz-block-height
|
No | No | No | 4 | No | No | No |
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/line-height