CSS - line-height
On block level elements, the line-height
property specifies the minimum height of line boxes within the element.
Examples
Example1
/* 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 { line-height: 12pt; font-size: 10pt } /* length */ div { font: 10pt/1.2 Georgia,"Bitstream Charter",serif }
Notes
- It is often more convenient to set
line-height
by using thefont
shortcut as stated in the "Examples" section above.
Prefer unitless numbers for line-height values
This example shows why it is better to prefer <number>
values for line-height instead of a <length>
.
We will use two <div>
elements. The first, with the green border, will use a unitless line-height value. The second, with the red border, has a length line-height value.
.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; }
The HTML, with our two boxes:
<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:
Syntax
/* Keyword values */ line-height: normal; /* Unitless: 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;
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 font size. The computed value is the same as the specified<number>
. In most cases this is the preferred way to setline-height
with no unexpected results in case of inheritance. <length>
- The specified
<length>
is used in the calculation of the line box height. See<length>
values for possible units. <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 "Notes" section.
Formal syntax
normal <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/number" title=""><number></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/length" title="Possible values: a number followed by'em', 'ex', 'ch', 'rem', 'px', 'cm', 'mm', 'in', 'vh', 'vw', 'vmin', 'vmax', 'pt', 'pc' or 'px', like 3px, 1.5cm, -0.5em or 0"><length></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/percentage" title=""><percentage></a>
Description
On block level elements, the line-height
property specifies the minimum height of line boxes within the element.
On non-replaced inline elements, line-height
specifies the height that is used to calculate line box height. On replaced inline elements such as buttons or other input elements, line-height
has no effect. [1]
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 |
Animatable | yes, as a number, a length |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Browser Compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 1.0[1] | 1.0 (1.7 or earlier) | 4.0[1] | 7.0 | 1.0[1] |
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | 1.0[1] | 1.0 (1) | 6.0[1] | 6.0 | 1.0[1] |
[1] Neither Webkit nor Trident implement the correct behavior with replaced inline elements like buttons. In some cases line-height
is allowed to have an effect on them. This is incorrect behavior relative to the specification.
See Also
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 |
License
© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/line-height