CSS padding-right

CSS padding-right Property

CSS padding-right property sets the right side padding to HTML Element(s).

The syntax to specify a value for padding-right property is

padding-right: value;

The following table gives the possible values that could be given to padding-right property.

Value	Description	Examples
length	Any valid CSS length unit. Refer CSS Length Units tutorial.	padding-right: 10px; padding-right: 5pt; padding-right: 2cm;
Percentage Value	Padding in percent of the width of the containing element.	padding-right: 20%;
initial	Sets padding-right to default value.	padding-right: initial;
inherit	Inherits padding-right value from its parent element.	padding-right: inherit;

Examples

In the following examples, we set right side padding to HTML Element(s) with a few allowed values for padding-right property.

padding-right property with CSS Length Units

In the following example, we apply padding-right property to paragraphs with a few different CSS Length Unit values.

index.html

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        p {
            border: 1px solid black;
            margin: 10px;
            width: 80px;
        }
        #p1 {
            padding-right: 20px;
        }
        #p2 {
            padding-right: 2cm;
        }
        #p3 {
            padding-right: 1in;
        }
        #p4 {
            padding-right: 4ex;
        }
        #p5 {
            padding-right: 4rem;
        }
    </style>
</head>
<body>
    <p id="p1">Hello World</p>
    <p id="p2">Hello World</p>
    <p id="p3">Hello World</p>
    <p id="p4">Hello World</p>
    <p id="p5">Hello World</p>
</body>
</html>

Note: border and display properties have been specified only to understand the bounds of the HTML Elements and thus understand the extent of padding applied for these HTML Elements.

padding-right property with Percentage Values

In the following example, we apply padding-right property to paragraphs with a few different percentage values.

If padding-right is specified in percentage values, and if width of the HTML element changes, then the padding also changes. For example, try to resize the browser window, and observe the right side padding for these HTML Elements.

index.html

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        p {
            border: 1px solid black;
            margin: 10px;
            width: 80px;
        }
        #p1 {
            padding-right: 5%;
        }
        #p2 {
            padding-right: 10%;
        }
        #p3 {
            padding-right: 15%;
        }
        #p4 {
            padding-right: 20%;
        }
        #p5 {
            padding-right: 25%;
        }
    </style>
</head>
<body>
    <p id="p1">Hello World</p>
    <p id="p2">Hello World</p>
    <p id="p3">Hello World</p>
    <p id="p4">Hello World</p>
    <p id="p5">Hello World</p>
</body>
</html>

padding-right property for a few HTML elements

In the following example, we take a few HTML elements like h1, p, a, span, and pre, and set padding-right for these HTML elements.

index.html

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        h1, p, a, pre {
            display: block;
            border: 1px solid;
            display: inline-block;
        }
        h1 {
            padding-right: 50px;
        }
        p {
            padding-right: 50px;
        }
        a {
            padding-right: 50px;
        }
        span {
            padding-right: 50px;
            background-color: #EEE;
        }
        pre {
            padding-right: 50px;
        }
    </style>
</head>
<body>
    <h1>Heading 1</h1>
    <br>
    <p>A paragraph.</p>
    <br>
    <a href="#">Anchor Text</a>
    <br>
    <p>A paragraph with a <span>span text</span>.</p>
    <br>
    <pre>pre
hello
world</pre>
</body>
</html>

Conclusion

In this CSS Tutorial, we learned about padding-top property, and how to use this property for HTML Elements, with examples.

TutorialKart

CSS padding-right