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"
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:
- 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:
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:
- 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:
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:
- After clicking the button:
- 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:
- After clicking the button:
- 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:
- After clicking the button:
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
.png)
