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
>
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
>
<
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
>
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
>
<
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
>
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
>
<
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
>
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
>
<
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
>
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 transitionDelay Property
- HTML | DOM Style outlineOffset Property
- HTML | DOM Style paddingLeft Property
- HTML | DOM Style wordWrap Property
- HTML | DOM Style columnRuleColor Property
- HTML | DOM Style margin Property
- HTML | DOM Style textIndent Property
- HTML | DOM Style fontSizeAdjust Property
- HTML | DOM Style backgroundOrigin Property
- HTML | DOM Style textShadow Property
- HTML | DOM Style textDecorationStyle Property
- HTML | DOM Style borderRadius Property
- HTML | DOM Style borderTopLeftRadius 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: