Skip to content
Related Articles

Related Articles

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

View Discussion
Improve Article
Save Article
  • Last Updated : 26 Jun, 2022
View Discussion
Improve Article
Save Article

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:

  1.  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.
  2. auto: This property is used when it is desired and is determined by the browser.
  3. initial: It sets the value of right-margin to its default value.
  4. 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>                    

Output:

 


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!