How to Change Line Spacing in CSS?

Given a text paragraph, the task is to change the line spacing (line height) using CSS. Line Spacing is used to improve the readability and visual appearance of the text. Line spacing refers to the vertical space between lines of text.

Change the Line Spacing using line-height Property

The line-height property is used to set the height of a line box, which determines the amount of space between lines of text.

Syntax:

line-height: normal | number | length | percentage | initial | inherit;

Note: Negative values are not allowed.

Example 1: In this example, we will increase the line height using CSS line-height property.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Line Spacing</title>

    <style>
        .set-line-height {
            line-height: 2;
        }
    </style>
</head>

<body>
    <h3>Paragraph with Default Line Spacing</h3>
    <p>
        HTML stands for HyperText Markup Language.
        It is the standard language used to create
        and design web pages on the internet. It
        was introduced by Tim Berners-Lee in 1991
        at CERN as a simple markup language.
    </p>

    <h3>Paragraph with Given Line Spacing</h3>
    <p class="set-line-height">
        HTML stands for HyperText Markup Language.
        It is the standard language used to create
        and design web pages on the internet. It
        was introduced by Tim Berners-Lee in 1991
        at CERN as a simple markup language.
    </p>
</body>

</html>

Output:

line-spacing

Example 2: In this example, we will decrease the line height using CSS line-height property.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Line Spacing</title>

    <style>
        .set-line-height {
            line-height: 75%;
        }
    </style>
</head>

<body>
    <h3>Paragraph with Default Line Spacing</h3>
    <p>
        HTML stands for HyperText Markup Language.
        It is the standard language used to create
        and design web pages on the internet. It
        was introduced by Tim Berners-Lee in 1991
        at CERN as a simple markup language.
    </p>

    <h3>Paragraph with Given Line Spacing</h3>
    <p class="set-line-height">
        HTML stands for HyperText Markup Language.
        It is the standard language used to create
        and design web pages on the internet. It
        was introduced by Tim Berners-Lee in 1991
        at CERN as a simple markup language.
    </p>
</body>

</html>

Output:

line-spacing-2

Article Tags :

CSS

Web Technologies

CSS-Questions