Open In App

CSS padding-right Property

Last Updated : 28 Aug, 2024
Comments
Improve
Suggest changes
1 Likes
Like
Report

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>

Output: 

Supported Browsers: The browser supported by padding-right property are listed below: 

  • Google Chrome 1.0 and above
  • Edge 12.0 and above
  • Internet Explorer 4.0 and above
  • Firefox 1.0 and above
  • Opera 3.5 and above
  • Apple Safari 1.0 and above

V

Vishal Chaudhary 2
Improve
Article Tags :

Explore

Lightbox