How to put spaces between lines in HTML?

How to put spaces between lines in HTML using CSS?

We use the CSS property line-height to put spaces in between the lines and give it a value.

The more value that we give to this property, the more will be the spaces between the lines.

The default value for the line-height property is 1.2.

One can choose to either increase the size or even choose to decrease the size based on our needs.

In the practical example code, we will see both examples with increasing & decreasing the size between the lines.

CSS :-

    p {
       border: solid 1px black;
       padding: 20px;
    }

    p.sm {
       line-height: 0.7;
    }

    p.lg {
       line-height: 2.5;
    } 

HTML :-

    <p>
       This is dummy text & it will always remain dummy.<br />
       This is dummy text & it will always remain dummy.
    </p>
    <p class="sm">
       This is dummy text & it will always remain dummy.<br />
       This is dummy text & it will always remain dummy.
    </p>
    <p class="lg">
       This is dummy text & it will always remain dummy.<br />
       This is dummy text & it will always remain dummy.
    </p> 

Output :-

In the CSS Syntax, we have created 3 different styles. The first is used just for formatting the paragraph.

The second style with class is given the line-height with a smaller size than the default one.

In the third style, we have created the class & have given line height that is a little bit greater.

In the HTML code, we have created three different paragraphs. The content for the Three paragraphs has been given the same text for understanding purposes.

In the output image, we can see that the first paragraph is displayed with a default line spacing. The second paragraph is displayed with a smaller line-height whereas the third paragraph has been given a greater line-height.