The line-height
CSS property sets the height of a line box. It's commonly used to set the distance between lines of 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.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Syntax
/* 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:
- 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>
(unitless)- 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). -moz-block-height
'- Sets the line height to the content height of the current block.
Accessibility concerns
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.
Formal 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 |
Computed value | for percentage and length values, the absolute length, otherwise as specified |
Animation type | either number or length |
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/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.
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.
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 -->
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;
}
Result
Specifications
Specification | Status | Comment |
---|---|---|
CSS Level 2 (Revision 1)The definition of 'line-height' in that specification. | Recommendation | No change. |
CSS Level 1The definition of 'line-height' in that specification. | Recommendation | Initial definition. |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
line-height
|
Chrome
Full support 1 |
Edge
Full support 12 |
Firefox
Full support 1 |
IE
Full support 4 |
Opera
Full support 7 |
Safari
Full support 1 |
WebView Android
Full support 1 |
Chrome Android
Full support 18 |
Firefox Android
Full support 4 |
Opera Android
Full support 10.1 |
Safari iOS
Full support 1 |
Samsung Internet Android
Full support 1.0 |
|
Chrome
No support No |
Edge
No support No |
Firefox
Full support 3.6 |
IE
No support No |
Opera
No support No |
Safari
No support No |
WebView Android
No support No |
Chrome Android
No support No |
Firefox Android
Full support 4 |
Opera Android
No support No |
Safari iOS
No support No |
Samsung Internet Android
No support No |
Legend
- Full support
- Full support
- No support
- No support
- Non-standard. Expect poor cross-browser support.'
- Non-standard. Expect poor cross-browser support.
See also
line-height by Mozilla Contributors is licensed under CC-BY-SA 2.5.