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:
1. length: It is used to specify the margin in fixed units. Its default value is 0.
Example:
html
<!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:
2. 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 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:
3. 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 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:
4. initial: It is used to set the property to its default value.
Example:
html
<!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:
5. inherit: It is used to inherit the value from its parent element.
Example:
html
<!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:
- Before clicking the button:
- After clicking the button:
Supported Browsers: The browser supported by DOM Style marginTop property are listed below:
- Google Chrome 1
- Edge 12
- Internet Explorer 3
- Firefox 1
- Opera 3.5
- Safari 1
.png)
