Skip to content
Related Articles

Related Articles

Improve Article

CSS | padding-right Property

  • Last Updated : 15 Mar, 2021

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
  • Internet Explorer 4.0
  • Firefox 1.0
  • Opera 3.5
  • Apple Safari 1.0

 




My Personal Notes arrow_drop_up