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"> w3wiki </ 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"> w3wiki </ 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"> w3wiki </ 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"> w3wiki </ 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"> w3wiki </ 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
Contact Us