Skip to content
Related Articles

Related Articles

CSS | padding-right Property

Improve Article
Save Article
  • Last Updated : 02 Aug, 2022
Improve Article
Save Article

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.

Syntax: 

padding-right: length;

Example: 

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

  • percentage: This mode is used to set the right padding in percent of the width of the element. It must be non-negative.

Syntax:

padding-right: percentage;

Example:

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

  • initial: This property is used to set the default value.

Syntax: 

padding-right: initial;

Example: 

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

My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!