Skip to content
Related Articles

Related Articles

CSS | margin-right Property
  • Last Updated : 02 Jan, 2019
GeeksforGeeks - Summer Carnival Banner

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:






    <!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:




    <!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:




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

Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.

My Personal Notes arrow_drop_up
Recommended Articles
Page :