Changing Spacing Between Paragraphs and Inside of Paragraphs

January 22, 2023 | by Arround The Web | No comments

Changing Spacing Between Paragraphs and Inside of Paragraphs

HTML is a markup language that offers numerous elements that create the website structure. CSS supports HTML in a way that it provides different styling and position properties to the HTML elements. More specifically, the HTML “” element specifies the paragraph in a document. The paragraphs can be adjusted with CSS properties, such as “margin”, “line-height”, “word-spacing”, and many more.

This write-up will instruct you:

Prerequisite: Create an HTML File

The HTML page can be created by following the instructions:

Add two “” elements in the HTML file.
Assign ids as “para1” and “para2”, respectively.
Specify paragraph content within these as given below:

Successful people simply put in a lot of effort and succeed on goal; they do not have natural talent.

Successful people simply put in a lot of effort and succeed on goal; they do not have natural talent.

Successful people simply put in a lot of effort and succeed on goal; they do not have natural talent.

Successful people simply put in a lot of effort and succeed on goal; they do not have natural talent.

</div>

Output

How to Change the Spacing Between paragraphs in CSS?

The “margin” property can add spaces between the paragraphs. Moreover, using the “margin-bottom” property would be a good choice in this case.

Let’s add a border property to show the margin space prominent.

Style “para1” Class

.para1 {

border: 1px solid gray;

margin-bottom: 70px;

}

The “.para1” is used to access the element with the id “para1” and apply the following properties:

“border” property is applied with the value of border width, style, and color sets the border around the paragraph.
“margin-bottom” adds space at the paragraph’s bottom.

Style “para2” Class

.para2 {

border: 1px solid gray;

}

The “” element having the id “para2” is also applied with the border using the CSS “border” property.

It can be observed that the spaces have been successfully added between the paragraphs:

How to Change the Spacing Inside of Paragraphs in CSS?

The CSS “line-height” property is utilized to add spaces between the lines of the paragraph.

To do so, add the line-height property to the “” element having id “para1”:

line-height: 2;

Output

That was all about changing spaces between the paragraphs.

Conclusion

To change spaces between the paragraphs, first, add paragraphs in the HTML file by using the “” element. Then, the CSS “margin-bottom” property is utilized to add space between the paragraphs. The CSS “line-height” property adds spaces inside the paragraphs. This post has elaborated on the procedure to change the spacing between paragraphs and inside of paragraphs.

Source: linuxhint.com