Skip to content
Related Articles

Related Articles

CSS | margin-right Property

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

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 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. 

Syntax:

margin-right: length;

Example: 

html




<!DOCTYPE html>
<html>
    <head>
        <title>
            margin-right property
        </title>
         
        <!-- margin-right property -->
        <style>
            h1 {
                margin-right: 100px;
                border:1px solid black;
            }
            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:

 margin right

  • auto: This property is used when it is desired and it is determined by browser. 

Syntax:

margin-right: auto;

Example: 

html




<!DOCTYPE html>
<html>
    <head>
        <title>
            margin-right property
        </title>
         
        <!-- margin-right property -->
        <style>
            h1 {
                margin-right: auto;
                border:1px solid black;
            }
            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:

 margin-right

  • initial It sets the value of right-margin to its default value. 

Syntax:

margin-right: initial;

Example: 

html




<!DOCTYPE html>
<html>
    <head>
        <title>
            margin-right property
        </title>
         
        <!-- margin-right property -->
        <style>
            h1 {
                margin-right: initial;
                border:1px solid black;
            }
            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:

 margin-right

  • inherit: This property is inherited from its parent.

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

  • Google Chrome 1.0
  • Edge 12.0
  • Internet Explorer 3.0
  • Firefox 1.0
  • Safari 1.0
  • Opera 3.5

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!