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><h1style="color: green">GeeksforGeeks</h1><b>DOM Style marginRight Property</b><divclass="container"><divclass="div1">Block One</div><divclass="div2">Block Two</div></div><buttononclick="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>chevron_rightfilter_noneOutput:
- Before clicking the button:
- After clicking the button:
- Before 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><h1style="color: green">GeeksforGeeks</h1><b>DOM Style marginRight Property</b><divclass="container"><divclass="div1">Block One</div><divclass="div2">Block Two</div></div><buttononclick="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>chevron_rightfilter_noneOutput:
- Before clicking the button:
- After clicking the button:
- Before 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><h1style="color: green">GeeksforGeeks</h1><b>DOM Style marginRight Property</b><divclass="container"><divclass="div1">Block One</div><divclass="div2">Block Two</div></div><buttononclick="setMargin()">Change marginRight</button><!-- Script to set marginRight to auto --><script>function setMargin() {elem = document.querySelector('.div1');elem.style.marginRight = 'auto';}</script></body></html>chevron_rightfilter_noneOutput:
- Before clicking the button:
- After clicking the button:
- Before 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><h1style="color: green">GeeksforGeeks</h1><b>DOM Style marginRight Property</b><divclass="container"><divclass="div1">Block One</div><divclass="div2">Block Two</div></div><buttononclick="setMargin()">Change marginRight</button><!-- Script to set marginRight to initial --><script>function setMargin() {elem = document.querySelector('.div1');elem.style.marginRight = 'initial';}</script></body></html>chevron_rightfilter_noneOutput:
- Before clicking the button:
- After clicking the button:
- Before 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><h1style="color: green">GeeksforGeeks</h1><b>DOM Style marginRight Property</b><divclass="container"><divclass="div1">Block One</div><divclass="div2">Block Two</div></div><buttononclick="setMargin()">Change marginRight</button><!-- Script to set marginRight to inherit --><script>function setMargin() {elem = document.querySelector('.div1');elem.style.marginRight = 'inherit';}</script></body></html>chevron_rightfilter_noneOutput:
- 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
Recommended Posts:
- HTML | DOM Style top Property
- HTML | DOM Style right Property
- HTML | DOM Style animationTimingFunction Property
- HTML | DOM Style textDecorationStyle Property
- HTML | DOM Style cursor Property
- HTML | DOM Style animationDirection Property
- HTML | DOM Style visibility Property
- HTML | DOM Style transitionProperty Property
- HTML | DOM Style isolation Property
- HTML | DOM Style clear Property
- HTML | DOM Style filter Property
- HTML | DOM Style columnFill Property
- HTML | DOM Style columns Property
- HTML | DOM Style borderBottomColor Property
- HTML | DOM Style textDecoration Property
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.
- Before clicking the button:
