How to change padding of paragraph using CSS?

Answer

To change padding of paragraph using CSS, you can set the padding style property for the paragraph elements with the values like 20px, 2rem, 1.1in, etc.

CSS Code

The following is the typical CSS code to change padding of paragraph in HTML page using tag name p.

Using pixels for padding

p {
   padding: 20px;
}

Using padding relative to parent dimensions

p {
   padding: 2rem;
}

Using inches for padding

p {
   padding: 1.1in;
}

Examples

We shall go through some working examples on how to change padding of paragraph using CSS. In the following examples, you may change the value of padding and Run the code to visually observe the changes made to the Paragraph elements.

Example 1

This is an example on how to change padding of paragraph using pixels for padding.

You may edit the following code, and click on Run button.

Example 2

This is an example on how to change padding of paragraph using padding relative to parent dimensions.

You may edit the following code, and click on Run button.

Example 3

This is an example on how to change padding of paragraph using inches for padding.

You may edit the following code, and click on Run button.