Skip to content
Related Articles

Related Articles

Improve Article
HTML | DOM Style marginRight Property
  • Difficulty Level : Basic
  • Last Updated : 01 Aug, 2019

The Style marginRight property in HTML DOM is used to set or return the right margin of an element.

Syntax:

  • It returns the marginRight property.
    object.style.marginRight
  • It is used to set the marginRight property.
    object.style.marginRight = "length|percentage|auto|initial|
    inherit"

Property Values:

  • length: It is used to specify the margin in fixed length units. The default value is 0.

    Example:




    <!DOCTYPE html>
    <html>
          
    <head>
        <title>
            DOM Style marginRight Property
        </title>
          
        <style>
            .container {
                display: flex;
                flex-direction: row;
                padding: 10px 1px;
            }
      
            .div1, .div2 {
                padding: 5px;
                border: 2px solid;
            }
        </style>
    </head>
      
    <body>
        <h1 style="color: green">
            GeeksforGeeks
        </h1>
          
        <b>DOM Style marginRight Property</b>
          
        <div class="container">
            <div class="div1">Block One</div>
            <div class="div2">Block Two</div>
        </div>
          
        <button onclick="setMargin()">
            Change marginRight
        </button>
      
        <!-- Script to set marginRight to a fixed value -->
        <script>
            function setMargin() {
                elem = document.querySelector('.div1');
                elem.style.marginRight = '50px';
            }
        </script>
    </body>
      
    </html>                    

    Output:



    • Before clicking the button:
      length-before
    • After clicking the button:
      length-after
  • percentage: It is used to specify the amount of margin as a percentage relative to the width of the containing element.
    Example:




    <!DOCTYPE html>
    <html>
          
    <head>
        <title>
            DOM Style marginRight Property
        </title>
          
        <style>
            .container {
                display: flex;
                flex-direction: row;
                padding: 10px 1px;
            }
      
            .div1, .div2 {
                padding: 5px;
                border: 2px solid;
            }
        </style>
    </head>
      
    <body>
        <h1 style="color: green">
            GeeksforGeeks
        </h1>
          
        <b>DOM Style marginRight Property</b>
          
        <div class="container">
            <div class="div1">Block One</div>
            <div class="div2">Block Two</div>
        </div>
          
        <button onclick="setMargin()">
            Change marginRight
        </button>
      
        <!-- Script to set marginRight to a fixed value -->
        <script>
            function setMargin() {
                elem = document.querySelector('.div1');
                elem.style.marginRight = '20%';
            }
        </script>
    </body>
      
    </html>                    

    Output:

    • Before clicking the button:
      percentage-before
    • After clicking the button:
      percentage-after
  • auto: If the value is set to ‘auto’, then the browser automatically calculates a suitable value for the margin size.

    Example:




    <!DOCTYPE html>
    <html>
          
    <head>
        <title>
            DOM Style marginRight Property
        </title>
          
        <style>
            .container {
                display: flex;
                flex-direction: row;
                padding: 10px 1px;
            }
      
            .div1, .div2 {
                margin-right: 50px;
                padding: 5px;
                border: 2px solid;
            }
        </style>
    </head>
      
    <body>
        <h1 style="color: green">
            GeeksforGeeks
        </h1>
          
        <b>DOM Style marginRight Property</b>
          
        <div class="container">
            <div class="div1">Block One</div>
            <div class="div2">Block Two</div>
        </div>
          
        <button onclick="setMargin()">
            Change marginRight
        </button>
          
        <!-- Script to set marginRight to auto -->
        <script>
            function setMargin() {
                elem = document.querySelector('.div1');
                elem.style.marginRight = 'auto';
            }
        </script>
    </body>
      
    </html>                    

    Output:

    • Before clicking the button:
      auto-before
    • After clicking the button:
      auto-after
  • initial: It is used to set the property to its default value.

    Example:




    <!DOCTYPE html>
    <html>
          
    <head>
        <title>
            DOM Style marginRight Property
        </title>
          
        <style>
            .container {
                display: flex;
                flex-direction: row;
                padding: 10px 1px;
            }
      
            .div1, .div2 {
                margin-right: 20px;
      
                padding: 5px;
                border: 2px solid;
            }
        </style>
    </head>
      
    <body>
        <h1 style="color: green">
            GeeksforGeeks
        </h1>
          
        <b>DOM Style marginRight Property</b>
          
        <div class="container">
            <div class="div1">Block One</div>
            <div class="div2">Block Two</div>
        </div>
          
        <button onclick="setMargin()">
            Change marginRight
        </button>
      
        <!-- Script to set marginRight to initial -->
        <script>
            function setMargin() {
                elem = document.querySelector('.div1');
                elem.style.marginRight = 'initial';
            }
        </script>
    </body>
      
    </html>                    

    Output:

    • Before clicking the button:
      initial-before
    • After clicking the button:
      initial-after
  • inherit: It is used to inherit the value from its parent element.

    Example:




    <!DOCTYPE html>
    <html>
          
    <head>
        <title>
            DOM Style marginRight Property
        </title>
          
        <style>
            .container {
                margin-right: 50px;
                display: flex;
                flex-direction: row;
            }
      
            .div1, .div2 {
                padding: 5px;
                border: 2px solid;
            }
        </style>
    </head>
      
    <body>
        <h1 style="color: green">
            GeeksforGeeks
        </h1>
          
        <b>DOM Style marginRight Property</b>
          
        <div class="container">
            <div class="div1">Block One</div>
            <div class="div2">Block Two</div>
        </div>
          
        <button onclick="setMargin()">
            Change marginRight
        </button>
      
        <!-- Script to set marginRight to inherit -->
        <script>
            function setMargin() {
                elem = document.querySelector('.div1');
                elem.style.marginRight = 'inherit';
            }
        </script>
    </body>
      
    </html>                    

    Output:

    • Before clicking the button:
      inherit-before
    • After clicking the button:
      inherit-after

    Supported Browsers: The browser supported by DOM Style marginRight property are listed below:

    • Google Chrome
    • Internet Explorer
    • Firefox
    • Opera
    • Safari



    My Personal Notes arrow_drop_up
Recommended Articles
Page :