Skip to content
Related Articles

Related Articles

HTML | DOM Style marginRight Property

View Discussion
Improve Article
Save Article
  • Difficulty Level : Basic
  • Last Updated : 03 Jun, 2022
View Discussion
Improve Article
Save Article

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

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!