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"
Return Values: It returns a string value that represents the top margin of an element
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><h1style="color: green">GeeksforGeeks</h1><b>DOM Style marginTop Property</b><divclass="container"><divclass="div1">Line One</div><divclass="div2">Line Two</div><buttononclick="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:
- 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 marginTop Property</title></head><body><h1style="color: green">GeeksforGeeks</h1><b>DOM Style marginTop Property</b><divclass="container"><divclass="div1">Line One</div><divclass="div2">Line Two</div><buttononclick="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:
- 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 marginTop Property</title></head><body><h1style="color: green">GeeksforGeeks</h1><b>DOM Style marginTop Property</b><divclass="container"><divclass="div1"style="margin-top: 50px;">Line One</div><divclass="div2">Line Two</div><buttononclick="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:
- Before clicking the button:
- initial: It is used to set the property to its default value.
Example:
<!DOCTYPE html><html><head><title>DOM Style marginTop Property</title></head><body><h1style="color: green">GeeksforGeeks</h1><b>DOM Style marginTop Property</b><divclass="container"><divclass="div1"style="margin-top: 50px;">Line One</div><divclass="div2">Line Two</div><buttononclick="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:
- Before clicking the button:
- inherit: It is used to inherit the value from its parent element.
Example:
<!DOCTYPE html><html><head><title>DOM Style marginTop Property</title></head><body><h1style="color: green">GeeksforGeeks</h1><b>DOM Style marginTop Property</b><divclass="container"><divclass="div1"style="margin-top: 50px;">Line One</div><divclass="div2">Line Two</div><buttononclick="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:
- Before clicking the button:
- After clicking the button:
Supported Browsers: The browser supported by DOM Style marginTop property are listed below:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari
.png)
