Definition and Usage
On block level elements, the line-height CSS property specifies the minimal height of line boxes within the element.
On non-replaced inline elements, line-height specifies the height that is used in the calculation of the line box height.
On replaced inline elements, like buttons or other input element, line-height has no effect.
- Initialnormal
- Applies toall elements
- Inheritedyes
- Percentagesrefer to the font size of the element itself
- Mediavisual
- Computed Valuefor percentage and length values, the absolute length, otherwise as specified
- Animatableyes, as a number, a length
- Canonical orderthe unique non-ambiguous order defined by the formal grammar
Syntax
Formal syntax: normal | <number> | <length> | <percentage>
line-height: normal
line-height: 3.5 /* <number> values */
line-height: 3em /* <length> values */
line-height: 34% /* <percentage values */
line-height: inherit
Values
- normal
- Depends on the user agent. Desktop browsers (including Firefox) use a default value of roughly 1.2, depending on the element’s font-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 set line-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.
Examples
2 |
div { line-height : 1.2 ; font-size : 10pt } |
3 |
div { line-height : 1.2em ; font-size : 10pt } |
4 |
div { line-height : 120% ; font-size : 10pt } |
5 |
div { line-height : 12pt ; font-size : 10pt } |
6 |
div { font : 10pt / 1.2 Georgia, "Bitstream Charter" , serif } |
Notes
It is often more convenient to set line-height by using the font 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.
03 |
border : solid limegreen; |
14 |
display : inline- block ; |
The HTML, with our two boxes:
01 |
< div class = "box green" > |
02 |
< h1 >Avoid unexpected results by using unitless line-height</ h1 > |
03 |
length and percentage line-heights have poor inheritance behavior ... |
06 |
< h1 >Avoid unexpected results by using unitless line-height</ h1 > |
07 |
length and percentage line-heights have poor inheritance behavior ... |
Compatibility
Desktop browsers
Feature |
Chrome |
Firefox (Gecko) |
Internet Explorer |
Opera |
Safari |
Basic support |
1.0 |
1.0 (1.7 or earlier) |
4.0 |
7.0 |
1.0 |
Mobile browsers
Feature |
Android |
Firefox Mobile (Gecko) |
IE Phone |
Opera Mobile |
Safari Mobile |
Basic support |
1.0 |
1.0 (1) |
6.0 |
6.0 |
1.0 |