Open In App
Related Articles

HTML | DOM Style marginRight Property

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

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"

Return Values: It returns a string value, which representing the right margin of an element.

Property Values:

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

Example: 

html

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

html

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

html

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

html

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

html

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

  • Google Chrome 1 and above
  • Edge 12 and above
  • Internet Explorer 3 and above
  • Firefox 1 and above
  • Opera 3.5 and above
  • Safari 1 and above


Last Updated : 03 Jun, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads