line-height
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.
Try it
Syntax
/* Keyword value */ line-height: normal; /* Unitless values: use this number multiplied by the element's font size */ line-height: 3.5; /* values */ line-height: 3em; /* values */ line-height: 34%; /* Global values */ line-height: inherit; line-height: initial; line-height: revert; line-height: revert-layer; line-height: unset;
The line-height property is specified as any one of the following:
Values
Depends on the user agent. Desktop browsers (including Firefox) use a default value of roughly 1.2 , depending on the element’s font-family .
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
Examples
Basic example
/* All rules below have the same resultant line height */ /* number/unitless */ div line-height: 1.2; font-size: 10pt; > /* length */ div line-height: 1.2em; font-size: 10pt; > /* percentage */ div line-height: 120%; font-size: 10pt; > /* font shorthand */ div font: 10pt/1.2 Georgia, "Bitstream Charter", serif; >
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
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> line-height is calculated from its own font-size (30px × 1.1) = 33px --> 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
Browser compatibility
BCD tables only load in the browser
See also
Found a content problem with this page?
This page was last modified on Jul 7, 2023 by MDN contributors.
Your blueprint for a better internet.
MDN
Support
Our communities
Developers
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.