Why Line height in CSS? - Purpose & Use Cases

The Big Idea

Discover how a simple CSS property can transform messy text into a smooth reading experience!

The Scenario

Imagine you are writing a paragraph on a webpage and you want the lines of text to have some space between them so it's easier to read.

The Problem

If you try to add space by pressing Enter multiple times or adding extra spaces manually, the text looks messy and uneven on different screen sizes.

The Solution

Using line height in CSS lets you control the space between lines consistently and beautifully, no matter the device or font size.

Before vs After

✗ Before

This is line one.

This is line two.

✓ After

p {
  line-height: 1.5;
}

What It Enables

You can make text easy to read and visually pleasant on any screen by adjusting line height.

Real Life Example

On a blog post, setting line height helps readers enjoy long articles without their eyes getting tired.

Key Takeaways

Manual spacing is unreliable and looks bad on different devices.

Line height controls vertical spacing between lines in a clean, consistent way.

It improves readability and user experience on websites.