Text
line-height
line-height sets the height of each line. A unitless number means a multiple of the font size.
Syntax
normal | <number [0,∞]> | <length-percentage [0,∞]>Preview
The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。
Presets
Drag the bottom-right corner to resize
Code
.box {
line-height: 2;
}Controls
line-height2
The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。
About
Writing the value
- A number:
1.8means 1.8 times the font size. This is the usual choice. - A length or percentage, such as
32pxor150%. Percentages are relative to the element's own font size. normal: the browser picks a value from the font, around1.2for most fonts. This is the initial value.
Why unitless numbers
line-height is inherited. A unitless number is passed down as a ratio, so children with larger text get taller lines. 150% or 1.5em is passed down as the length computed from the parent's font size. With a 16px parent every child gets 24px, and a child heading at 32px ends up with overlapping lines.
Split above and below
The difference between the line height and the text height is split in half and added above and below the text. That is why the first line also has space above it, and why text sits in the vertical middle of a button. For a single-line element, setting line-height equal to its height centers the text vertically.
Watch out
- Japanese body text usually gets more line spacing than English, around
1.7to2. - The
fontshorthand resets an omittedline-heighttonormal.