How to Adjust Line Height with CSS

📘 Premium Read: Access my best content on Medium member-only articles — deep dives into Java, Spring Boot, Microservices, backend architecture, interview preparation, career advice, and industry-standard best practices.

✅ Some premium posts are free to read — no account needed. Follow me on Medium to stay updated and support my writing.

🎓 Top 10 Udemy Courses (Huge Discount): Explore My Udemy Courses — Learn through real-time, project-based development.

▶️ Subscribe to My YouTube Channel (172K+ subscribers): Java Guides 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.

Java Guides

Search This Blog