HTML | DOM Style marginTop Property
The Style marginTop property in HTML DOM is used to set or return the top margin of an element.
Syntax:
- It returns the marginTop property.
object.style.marginTop
- It is used to set the marginTop property.
object.style.marginTop = "length|percentage|auto|initial| inherit"
Property Values:
- length: It is used to specify the margin in fixed units. Its default value is 0.
Example:
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>
DOM Style marginTop Property
</
title
>
</
head
>
<
body
>
<
h1
style
=
"color: green"
>
GeeksforGeeks
</
h1
>
<
b
>DOM Style marginTop Property</
b
>
<
div
class
=
"container"
>
<
div
class
=
"div1"
>Line One</
div
>
<
div
class
=
"div2"
>Line Two</
div
>
<
button
onclick
=
"setMargin()"
>
Change marginTop
</
button
>
</
div
>
<!-- Script to set top margin -->
<
script
>
function setMargin() {
elem = document.querySelector('.div1');
elem.style.marginTop = '50px';
}
</
script
>
</
body
>
</
html
>
Output:
- Before clicking the button:
After clicking the button:
- Before clicking the button:
Example:
<!DOCTYPE html> < html > < head > < title > DOM Style marginTop Property </ title > </ head > < body > < h1 style = "color: green" > GeeksforGeeks </ h1 > < b >DOM Style marginTop Property</ b > < div class = "container" > < div class = "div1" >Line One</ div > < div class = "div2" >Line Two</ div > < button onclick = "setMargin()" > Change marginTop </ button > </ div > <!-- Script to set top margin --> < script > function setMargin() { elem = document.querySelector('.div1'); elem.style.marginTop = '20%'; } </ script > </ body > </ html > |
Output:
- Before clicking the button:
- After clicking the button:
Example:
<!DOCTYPE html> < html > < head > < title > DOM Style marginTop Property </ title > </ head > < body > < h1 style = "color: green" > GeeksforGeeks </ h1 > < b >DOM Style marginTop Property</ b > < div class = "container" > < div class = "div1" style = "margin-top: 50px;" > Line One </ div > < div class = "div2" > Line Two </ div > < button onclick = "setMargin()" > Change marginTop </ button > </ div > <!-- Script to set top margin --> < script > function setMargin() { elem = document.querySelector('.div1'); elem.style.marginTop = 'auto'; } </ script > </ body > </ html > |
Output:
- Before clicking the button:
After clicking the button:
Example:
<!DOCTYPE html> < html > < head > < title > DOM Style marginTop Property </ title > </ head > < body > < h1 style = "color: green" > GeeksforGeeks </ h1 > < b >DOM Style marginTop Property</ b > < div class = "container" > < div class = "div1" style = "margin-top: 50px;" > Line One </ div > < div class = "div2" > Line Two </ div > < button onclick = "setMargin()" > Change marginTop </ button > </ div > <!-- Script to set top margin --> < script > function setMargin() { elem = document.querySelector('.div1'); elem.style.marginTop = 'initial'; } </ script > </ body > </ html > |
Output:
- Before clicking the button:
- After clicking the button:
Example:
<!DOCTYPE html> < html > < head > < title > DOM Style marginTop Property </ title > </ head > < body > < h1 style = "color: green" > GeeksforGeeks </ h1 > < b >DOM Style marginTop Property</ b > < div class = "container" > < div class = "div1" style = "margin-top: 50px;" > Line One </ div > < div class = "div2" > Line Two </ div > < button onclick = "setMargin()" > Change marginTop </ button > </ div > <!-- Script to set top margin --> < script > function setMargin() { elem = document.querySelector('.div1'); elem.style.marginTop = 'inherit'; } </ script > </ body > </ html > |
Output:


Supported Browsers: The browser supported by DOM Style marginTop property are listed below:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari