One value, like: div {margin: 50px} - all four margins will be 50px
Two values, like: div {margin: 50px 10px} - the top and bottom margins will be 50px, left and right margins will be 10px
Three values, like: div {margin: 50px 10px 20px}- the top margin will be 50px, left and right margin will be 10px, bottom margin will be 20px
Four values, like: div {margin: 50px 10px 20px 30px} - the top margin will be 50px, right margin will be 10px, bottom margin will be 20px, left margin will be 30px

Syntax

Set the margin property:

Object.style.margin="%|length|auto|inherit"

Return the margin property:

Object.style.margin

Value	Description
%	Defines the margins in % of the width of the parent element
length	Defines the margins in length units
auto	The browser sets the margins (all four margins will be equal)
inherit	The margins are inherited from the parent element

Browser Support

The margin property is supported in all major browsers.

Note: The value "inherit" is not supported in IE7 and earlier. IE8 requires a !DOCTYPE. 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 the space around the border, while padding inserts the space within the border of an element.

Example

Change the margins of a div element:

<html>
<head>
<style type="text/css">
#ex1
{
border: 1px solid #FF0000;
}
</style>
<script>
function displayResult()
{
document.getElementById("ex1").style.margin="100px";
}
</script>
</head>
<body>

<div id="ex1">This is some text.</div>
<br>
<button type="button" onclick="displayResult()">Change margin</button>

</body>
</html>

Try it yourself »

Style Object