CSS | margin-right Property

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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:
    margin right

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

    Syntax:

    margin-right: auto;

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:
    margin-right

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

    Syntax:

    margin-right: initial;

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    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


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.