CSS padding-right Property

Last Updated : 28 Aug, 2024

Padding is the space between its content and its border. The padding-right property in CSS is used to set the width of the padding area on the right of an element.

Syntax:

padding-right: length | percentage | initial | inherit;

Property values:

length: This mode is used to specify the size of padding as a fixed value. The default value is 0. It must be non-negative.
percentage: This mode is used to set the right padding in percent of the width of the element. It must be non-negative.
initial: This property is used to set the default value.

Example: In this example, we use padding-right: length; property.

html

<!DOCTYPE html>
<html>
<head>
    <title>
        padding-right Property
    </title>

    <style>
        .geek {
            padding-right: 200px;
            color: white;
            background: green;
            width: 50%;
            font-size: 18px;
        }
    </style>
</head>

<body style="text-align:center">
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>

    <h2>
        padding-right Property
    </h2>

    <!-- padding-right property used here -->
    <p class="geek">
        This paragraph has a padding-right: 200px;
    </p>
</body>
</html>

Output:

paddingright

Example: In this example, we are using padding-right: percentage; property.

html

<!DOCTYPE html>
<html>
<head>
    <title>
        padding-right Property
    </title>
    <style>
        .geek {
            padding-right: 40%;
            color: white;
            background: green;
            width: 50%;
            font-size: 18px;
        }
    </style>
</head>

<body style="text-align:center">
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
    <h2>
        padding-right Property
    </h2>

    <!-- padding-right property used here -->
    <p class="geek">
        This paragraph has a padding-right: 40%;
    </p>
</body>
</html>

Output:

paddingright

Example: In this example, we are using padding-right: initial; property.

html

<!DOCTYPE html>
<html>
<head>
    <title>
        padding-right Property
    </title>

    <style>
        .geek {
            padding-right: initial;
            color: white;
            background: green;
            width: 70%;
            font-size: 25px;
        }
    </style>
</head>

<body style="text-align:center">
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>

    <h2>
        padding-right Property
    </h2>

    <!-- padding-right property used here -->
    <p class="geek">
        This paragraph has a padding-right: initial;
    </p>
</body>
</html>