How to Adjust Line Height with CSS

Introduction

Line height controls the space between lines of text in CSS. Adjusting it can improve readability or tighten the appearance of content on a page.

In this tutorial, you'll learn how to adjust line height using the line-height property. We'll explore different ways to set line height and show how to customize it for better layout and design.

Problem Statement

Create a CSS code that:

  • Adjusts the line height of text using the line-height property.
  • Demonstrates how to apply different values to control the space between text lines.

Example:

  • Input: A paragraph element with the text "Line Height Example".
  • Output: The text appears with adjusted line spacing based on the applied CSS.

Solution Steps

  1. Use line-height Property: Set the line-height property to adjust the space between lines of text.
  2. Apply Numeric and Unit-Based Values: Use different values (numeric or unit-based) to control line height.

HTML Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Line Height Example</title>
    <style>
        /* Step 1: Set a default line height */
        .default-line-height {
            line-height: normal;
        }

        /* Step 2: Increase line height using a numeric value */
        .increased-line-height {
            line-height: 1.5;
        }

        /* Step 3: Set line height with unit-based value */
        .unit-line-height {
            line-height: 30px;
        }
    </style>
</head>
<body>

    <p class="default-line-height">This text has the default line height.</p>
    <p class="increased-line-height">This text has an increased line height of 1.5.</p>
    <p class="unit-line-height">This text has a line height set in pixels (30px).</p>

</body>
</html>

Output

You can play with the above HTML in Online HTML Editor and Compiler. Here is the output of the above HTML page.:

Explanation

Step 1: Use line-height: normal

  • The default line height can be set using this code:
    .default-line-height {
        line-height: normal;
    }
    

Step 2: Increase Line Height Using a Numeric Value

  • To increase the space between lines, use a numeric value like this:
    .increased-line-height {
        line-height: 1.5;
    }
    

Step 3: Use Unit-Based Line Height

  • You can also specify a fixed line height using units like pixels:
    .unit-line-height {
        line-height: 30px;
    }
    

Conclusion

Adjusting line height in CSS is straightforward using the line-height property. You can customize it using numeric values or fixed units to create better text spacing for improved readability.

Comments

Spring Boot 3 Paid Course Published for Free
on my Java Guides YouTube Channel

Subscribe to my YouTube Channel (165K+ subscribers):
Java Guides Channel

Top 10 My Udemy Courses with Huge Discount:
Udemy Courses - Ramesh Fadatare