html

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 “<p>” 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 “<p>” elements in the HTML file.
  • Assign ids as “para1” and “para2”, respectively.
  • Specify paragraph content within these as given below:
<div class="content">

<p class="para1">

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. </p>

<p class="para2">

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. </p>

</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 <p> 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 “<p>” 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 “<p>” 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 “<p>” 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.

About the author

Nadia Bano

I am an enthusiastic and forward-looking software engineer with an aim to explore the global software industry. I love to write articles on advanced-level designing, coding, and testing.