Which property specifies the right padding of an element in CSS ?

Last Updated : 26 Jun, 2022

In this article, we will discuss the property that specifies the right padding of an element.

The margin-right property in CSS is used to set the right margin of an element. It sets the margin-area on the right side of the element. Negative values are also allowed. The default value of the margin-right property is zero.

Syntax:

margin-right: length|auto|initial|inherit;

Property Value:

length: This property is used to set a fixed value defined in px, cm, pt etc. The negative value is allowed and the default value is 0px.
auto: This property is used when it is desired and is determined by the browser.
initial: It sets the value of right-margin to its default value.
inherit: This property is inherited from its parent

Example 1: In this example, we will demonstrate the margin-right with the length attribute.

HTML

<!DOCTYPE html> 
<html> 
    <head> 
        <title> 
            margin-right property 
        </title> 
          
        <!-- margin-right property -->
        <style> 
            h1 { 
                margin-right: 100px; 
                border:1px solid black; 
                
        color: green; 
      
            } 
            h2 { 
                margin-right:250px; 
                border:1px solid black; 
            } 
              
        </style> 
    </head> 
      
    <body style = "text-align:center"> 
        <h1>GeeksforGeeks</h1> 
        <h2>margin-right property</h2> 
    </body> 
</html>                     

Output:

Example 2: In this example, we will demonstrate the margin-right with the auto attribute.

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title>    margin-right property</title> 
          
    <!-- margin-right property -->
    <style>         
        h1 
        { 
            margin-right:auto; 
            border:1px solid black; 
            color: green; 
        } 
        h2 
        { 
           margin-right:auto; 
           border:1px solid black; 
        }             
    </style> 
</head> 
      
<body style="text-align:center"> 
        <h1>GeeksforGeeks</h1> 
        <h2>margin-right property</h2> 
</body> 
</html>                     

Output:

Example 3: In this example, we will demonstrate the margin-right with the initial attribute.

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title>    margin-right property</title> 
          
    <!-- margin-right property -->
    <style>     
        h1 
        { 
          margin-right: initial; 
          border:1px solid black; 
          color:green; 
        } 
        h2 
        { 
           margin-right:initial; 
           border:1px solid black; 
        }             
    </style> 
</head> 
      
<body style="text-align:center"> 
    <h1>GeeksforGeeks</h1> 
    <h2>margin-right property</h2> 
</body> 
</html>                     