HTML | DOM Style marginRight Property

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:
After clicking the button:

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:
After clicking the button:

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:
After clicking the button:

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:
After clicking the button:

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:
After clicking the button:

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

Google Chrome
Internet Explorer
Firefox
Opera
Safari

My Personal Notes

Recommended Posts: