Line-height property
Last updated: 2026-09-13
line-height Line-height property
The line-height CSS property sets the vertical space between lines of text. A well-chosen line height significantly improves readability of long-form text, typically around 1.5 times the font size.
| Category | |
|---|---|
| Initial Value | normal |
| Inherited | Yes |
| Applies To | all |
| Animation Type | number |
| CSS Version | CSS1 |
| Status | Standard |
📝 Syntax
line-height: normal | <number> | <length> | <percentage>;⚙️ Values
| Value | Type | Description |
|---|---|---|
normal | Keyword | Default line height (about 1.2) |
<number> | Type | A unitless multiplier, e.g. 1.5 |
<length> | <percentage> | Type | A fixed line height as a length or percentage |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| line-height | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Supported in all major browsers | |||||
Tip： Prefer unitless numbers (like 1.5): they scale with the font size and their inheritance behavior is more predictable.
Important： Unitless numbers and percentages inherit differently: a unitless number is inherited as a multiplier, while a percentage is resolved against the parent's font size and inherited as a fixed pixel value.
❓ FAQ
QHow do I vertically center a single line of text using CSS rules?
ASet line-height equal to the container's height, for example height: 40px; line-height: 40px, and the single line will be vertically centered. However, multi-line text will overflow, in which case you should switch to Flexbox with align-items: center.
QWhat line height should I use for readable body text on my website?
AFor body text, 1.5–1.8 times the font size is recommended; long-form reading benefits from 1.7–1.8, while headings can be tighter at 1.2–1.4. Code blocks often use 1.4–1.6. On mobile, where screens are narrower, line height usually needs to be slightly larger than on desktop.
QWhat is the difference between line-height: 1.5 and line-height: 150%?
AThe difference is inheritance. A unitless 1.5 is a multiplier, so children compute their line height from their own font size — predictable behavior. A percentage like 150% is resolved to a fixed pixel value against the parent's font size before being inherited, so it does not adjust when child font sizes change, which can cause problems.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
