HTML | DOM Style marginRight Property
Last Updated :
03 Jun, 2022
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 >
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 >
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 >
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 >
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 >
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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...