How to Adjust Line Height with CSS

🎓 Top 15 Udemy Courses (80-90% Discount): My Udemy Courses - Ramesh Fadatare — All my Udemy courses are real-time and project oriented courses.

▶️ Subscribe to My YouTube Channel (178K+ subscribers): Java Guides on YouTube

▶️ For AI, ChatGPT, Web, Tech, and Generative AI, subscribe to another channel: Ramesh Fadatare on YouTube

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

Use line-height Property: Set the line-height property to adjust the space between lines of text.
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.

My Top and Bestseller Udemy Courses. The sale is going on with a 70 - 80% discount. The discount coupon has been added to each course below:

Spring Boot + RabbitMQ Course - The Practical Guide

Java Guides

Search This Blog