HTML DOM Style marginTop Property
Last Updated :
16 Jun, 2023
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.
- percentage: It is used to specify the amount of margin as a percentage relative to the width of the containing element.
- auto: If the value is set to ‘auto’, then the browser automatically calculates a suitable value for the margin size.
- initial: It is used to set the property to its default value.
- inherit: It is used to inherit the value from its parent element.
Example: In this example, we are using object.style.marginTop = length property.
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 >
function setMargin() {
elem = document.querySelector('.div1');
elem.style.marginTop = '50px';
}
</ script >
</ body >
</ html >
|
Output:
Example: In this example, we are using object.style.marginTop = percentage property.
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 >
function setMargin() {
elem = document.querySelector('.div1');
elem.style.marginTop = '20%';
}
</ script >
</ body >
</ html >
|
Output:
Example: In this example, we are using object.style.marginTop = auto property.
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 >
function setMargin() {
elem = document.querySelector('.div1');
elem.style.marginTop = 'auto';
}
</ script >
</ body >
</ html >
|
Output:
Example: In this example, we are using object.style.marginTop = initial property.
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 >
function setMargin() {
elem = document.querySelector('.div1');
elem.style.marginTop = 'initial';
}
</ script >
</ body >
</ html >
|
Output:
Example: In this example, we are using object.style.marginTop = inherit property.
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 >
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 1
- Edge 12
- Internet Explorer 3
- Firefox 1
- Opera 3.5
- Safari 1
Share your thoughts in the comments
Please Login to comment...