CssHow-ToBeginner · 3 min read

How to Set Line-Height in CSS: Simple Guide

Use the line-height property in CSS to control the space between lines of text. You can set it using a number, length, or percentage, for example, line-height: 1.5; increases spacing by 1.5 times the font size.

📐

Syntax

The line-height property sets the amount of space above and below inline elements, usually text lines.

Number: Multiplies the element's font size (e.g., 1.5 means 1.5 times the font size).
Length: Fixed size like 20px or 1.2rem.
Percentage: Percentage of the font size (e.g., 150% equals 1.5 times font size).
Normal: Default spacing, usually about 1.2.

css

selector {
  line-height: normal | number | length | percentage;
}

💻

Example

This example shows three paragraphs with different line-height values to see how spacing changes between lines.

css

html {
  font-family: Arial, sans-serif;
  font-size: 16px;
}

p.normal {
  line-height: normal;
  background-color: #f0f8ff;
  padding: 10px;
}

p.number {
  line-height: 1.8;
  background-color: #e6ffe6;
  padding: 10px;
}

p.length {
  line-height: 30px;
  background-color: #fff0f5;
  padding: 10px;
}

Output

This paragraph uses <code>line-height: normal</code>. The lines are spaced with the browser default. This paragraph uses <code>line-height: 1.8</code>. The lines have more space, making text easier to read. This paragraph uses <code>line-height: 30px</code>. The line spacing is fixed to 30 pixels regardless of font size.

⚠️

Common Pitfalls

One common mistake is setting line-height with units when using a unitless number is better for scalability. For example, line-height: 1.5; scales with font size, but line-height: 24px; stays fixed and can cause layout issues on different screen sizes.

Another pitfall is setting too small a line-height, which makes text hard to read, or too large, which breaks the flow.

css

/* Wrong: fixed line-height with px can cause issues */
p {
  line-height: 24px;
}

/* Better: unitless number scales with font size */
p {
  line-height: 1.5;
}

📊

Quick Reference

Here is a quick summary of how to use line-height:

Value Type	Example	Effect
Normal	line-height: normal;	Default spacing, about 1.2 times font size
Number (unitless)	line-height: 1.5;	Multiplies font size, scales well with text size
Length	line-height: 24px;	Fixed spacing in pixels or rem, does not scale
Percentage	line-height: 150%;	Percentage of font size, same as number 1.5

✅

Key Takeaways

Use the CSS property line-height to control vertical spacing between text lines.

A unitless number like 1.5 is best for responsive and scalable line spacing.

Avoid fixed units like pixels unless you want exact spacing regardless of font size.

Too small or too large line-height harms readability; aim for comfortable spacing.

The default normal value usually works but can be adjusted for design needs.