How to change paragraph spacing in react js?

October 14, 2024

Hi Friends 👋,

Welcome To aHoisting!

To change paragraph spacing in react js, you can set line-height: 1.8; in .paragraph. It will change paragraph spacing in react js.

Today, I am going to show you, how to change paragraph spacing in react js.

Table of contents

Install and create a new React app.
Import react component.
Create a Component.

Let’s start with the first step.

Step 1: Install and create a new React app.

First you have to install the React project. You should use create-react-app command to create a new React project.

npx create-react-app my-app
cd my-app
npm start

Step 2: Import react component.

After installing, you have to import your React component.

import React from 'react';
import './App.css';

Step 3: Create a Component.

You can use className="custom-underline" to change paragraph spacing in react js.

<div>
  <p className="paragraph">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
       
  <p className="paragraph">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>

  <p className="paragraph">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
</div>

Change paragraph spacing example.

The below code is an example of a React. You have to import './App.css' and set line-height: 1.8; in .paragraph to change paragraph spacing in react js.

App.js

import React from 'react';
import './App.css';

function App() {
  return (
    <div>
      <p className="paragraph">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
       
      <p className="paragraph">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>

      <p className="paragraph">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
    </div>
  );
}

export default App;

App.css

.paragraph {
  margin-bottom: 20px;
  line-height: 1.8;
}

In the above code example, I have used the line-height: 1.8; to change paragraph spacing in react js.

Check the output of the above code.

All the best 👍