0
0
CSSmarkup~5 mins

Line height in CSS

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Line height controls the space between lines of text. It makes reading easier and the page look neat.

To make paragraphs easier to read by adding space between lines.
To adjust spacing in headings so they look balanced.
To fix text that looks too crowded or too spaced out.
To improve accessibility by increasing line spacing for people with reading difficulties.
To create a consistent look across different text blocks on a webpage.
Syntax
CSS
line-height: normal | number | length | percentage;

normal uses the browser's default spacing.

A number multiplies the font size to set line height (e.g., 1.5 means 1.5 times the font size).

Examples
Uses default spacing set by the browser.
CSS
line-height: normal;
Sets line height to 1.5 times the font size, adding more space between lines.
CSS
line-height: 1.5;
Sets line height to exactly 24 pixels, fixed spacing regardless of font size.
CSS
line-height: 24px;
Sets line height to 150% of the font size, similar to 1.5 but using percentage.
CSS
line-height: 150%;
Sample Program

This example shows three paragraphs with different line heights. You can see how the space between lines changes and affects readability.

CSS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Line Height Example</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 2rem;
    }
    .normal {
      line-height: normal;
      background-color: #f0f8ff;
      padding: 1rem;
      margin-bottom: 1rem;
    }
    .one-point-five {
      line-height: 1.5;
      background-color: #e6ffe6;
      padding: 1rem;
      margin-bottom: 1rem;
    }
    .fixed {
      line-height: 2rem;
      background-color: #fff0f5;
      padding: 1rem;
    }
  </style>
</head>
<body>
  <section>
    <h1>Line Height Examples</h1>
    <article class="normal">
      <p>This paragraph uses <strong>normal</strong> line height. The space between lines is the browser default.</p>
    </article>
    <article class="one-point-five">
      <p>This paragraph uses a line height of <strong>1.5</strong>. The lines have more space, making it easier to read.</p>
    </article>
    <article class="fixed">
      <p>This paragraph uses a fixed line height of <strong>2rem</strong>. The space between lines is exactly 2 rem units.</p>
    </article>
  </section>
</body>
</html>
OutputSuccess
Important Notes

Using a number (like 1.5) is recommended because it scales with font size and keeps spacing consistent.

Fixed lengths (like 24px or 2rem) can cause text to look cramped or too spaced if font size changes.

Good line height improves reading comfort, especially on long paragraphs.

Summary

Line height controls vertical space between lines of text.

Use numbers like 1.5 for flexible, readable spacing.

Adjust line height to improve text clarity and page design.