Style marginTopProperty
Style Object
Definition and Usage
The marginTop property sets or returns the top margin of an element.
Syntax
Setting the marginTop property:
Object.style.marginTop="%|length|auto|inherit"
Returning the marginTop property:
Object.style.marginTop
| Value | Description |
|---|---|
| % | Defines the top margin as a percentage based on the width of the parent element. |
| length | Defines the width of the top margin using units such as px, cm, etc. |
| auto | The top margin set by the browser. |
| inherit | The top margin is inherited from the parent element. |
Browser Support
All major browsers support the marginTop property.
Note:IE7 and earlier versions do not support the "inherit" value. IE8 only supports "inherit" when a !DOCTYPE is specified. IE9 supports "inherit".
Tips and Notes
Both the margin property and the padding property insert space around an element. However, the difference is that margin inserts space outside the border, while padding inserts space inside the element's border.
Example
Example
Change the top margin of a div element:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example(example.com)</title>
<style type="text/css">
div{
border: 1px solid #FF0000;
}
</style>
<script>
function changeMargin(){
document.getElementById("ex1").style.marginTop="100px";
}
function changePadding(){
document.getElementById("ex2").style.paddingTop="100px";
}
</script>
</head>
<body>
<div id="ex1">This is some text.</div>
<br>
<button type="button" onclick="changeMargin()">Modify the div element's top margin</button>
<br>
<br>
<div id="ex2">This is some text.</div>
<br>
<button type="button" onclick="changePadding()">Modify the div element's top padding</button>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Example(example.com)</title>
<style type="text/css">
div{
border: 1px solid #FF0000;
}
</style>
<script>
function changeMargin(){
document.getElementById("ex1").style.marginTop="100px";
}
function changePadding(){
document.getElementById("ex2").style.paddingTop="100px";
}
</script>
</head>
<body>
<div id="ex1">This is some text.</div>
<br>
<button type="button" onclick="changeMargin()">Modify the div element's top margin</button>
<br>
<br>
<div id="ex2">This is some text.</div>
<br>
<button type="button" onclick="changePadding()">Modify the div element's top padding</button>
</body>
</html>
Try it yourself »
Style Object Other Extensions