How to change height of paragraph using CSS?

Answer

To change height of paragraph using CSS, you can set the height style property for the paragraph elements with the values like 100px, 5in, 50%, etc.

CSS Code

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

Using height in pixels

p {
   height: 100px;
}

Using height in inches

p {
   height: 5in;
}

Using height in percentage of parent element

p {
   height: 50%;
}

Examples

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

Example 1

This is an example on how to change height of paragraph using height in pixels .

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

Example 2

This is an example on how to change height of paragraph using height in inches.

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

Example 3

This is an example on how to change height of paragraph using height in percentage of parent element.

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