Style marginProperty
Style Object
Definition and Usage
The margin property sets or returns the margins of an element.
This property can take from 1 to 4 values:
- If one value is specified, like: div {margin: 50px} - all four margins are 50px.
- If two values are specified, like: div {margin: 50px 10px} - the top and bottom margins are 50px, and the left and right margins are 10px.
- If three values are specified, like: div {margin: 50px 10px 20px} - the top margin is 50px, the left and right margins are 10px, and the bottom margin is 20px.
- If four values are specified, like: div {margin: 50px 10px 20px 30px} - the top margin is 50px, the right margin is 10px, the bottom margin is 20px, and the left margin is 30px.
Syntax
Setting the margin property:
Object.style.margin="%|length|auto|inherit"
Returning the margin property:
Object.style.margin
| Value | Description |
|---|---|
| % | Defines a percentage margin based on the width of the parent element. |
| length | Defines the width of the margins using units such as px, cm, etc. |
| auto | The margins set by the browser (all four margins are equal). |
| inherit | The margins are inherited from the parent element. |
Browser Support
All major browsers support the margin property.
Note:IE7 and earlier versions do not support the "inherit" value. IE8 supports "inherit" only if a !DOCTYPE is specified. IE9 supports "inherit".
Tips and Notes
The margin property and the padding property both 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.
Examples
Examples
Change the margins 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.margin="100px";
}
function changePadding(){
document.getElementById("ex2").style.padding="100px";
}
</script>
</head>
<body>
<div id="ex1">This is some text.</div>
<br>
<button type="button" onclick="changeMargin()">Change the margins of the div element</button>
<br>
<br>
<div id="ex2">This is some text.</div>
<br>
<button type="button" onclick="changePadding()">Change the padding of the div element</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.margin="100px";
}
function changePadding(){
document.getElementById("ex2").style.padding="100px";
}
</script>
</head>
<body>
<div id="ex1">This is some text.</div>
<br>
<button type="button" onclick="changeMargin()">Change the margins of the div element</button>
<br>
<br>
<div id="ex2">This is some text.</div>
<br>
<button type="button" onclick="changePadding()">Change the padding of the div element</button>
</body>
</html>
Try it yourself »
Style Object Other Extensions