Javascript Reference - HTML DOM Style margin Property








The margin property sets or gets the margins of an element.

margin can have one to four values.

margin:10px 5px 15px 20px;

is equal to

  • top margin is 10px
  • right margin is 5px
  • bottom margin is 15px
  • left margin is 20px
margin:10px 5px 15px;

is equal to

  • top margin is 10px
  • right and left margins are 5px
  • bottom margin is 15px
margin:10px 5px;

is equal to

  • top and bottom margins are 10px
  • right and left margins are 5px
margin:10px;

is equal to all four margins are 10px.

Negative values are allowed.





Browser Support

margin Yes Yes Yes Yes Yes

Syntax

Return the margin property:

var v = object.style.margin

Set the margin property:

object.style.margin='%|length|auto|initial|inherit'

Property Values

ValueDescription
auto Default value. The browser does the calculation.
length Set width in px, cm, etc.
% Set width in percent of the containing element
inherit Inherit the width property from the parent element




Technical Details

Default Value: 0
Return Value: A string representing the margins of an element
CSS Version CSS1

Example

The following code shows how to set all four margins of a <div> element.


<!DOCTYPE html>
<html>
<head>
<style>
#myDiv {<!--  ww w. j  av  a 2  s  .com-->
    border: 1px solid #FF0000;
}
</style>
</head>
<body>
<div id="myDiv">This is a div.</div>
<button type="button" onclick="myFunction()">test</button>
<script>
function myFunction() {
    document.getElementById("myDiv").style.margin = "50px 10px 20px 30px";
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 2

The following code shows how to change all four margins of a <div> element to "25px".


<!DOCTYPE html>
<html>
<head>
<style>
#myDiv {<!--from  w  w w. j  av a2 s  .c o m-->
    border: 1px solid red;
    margin: 2cm 4cm 3cm 2cm;
}
</style>
</head>
<body>

<div id="myDiv">This is a div.</div>
<button type="button" onclick="myFunction()">test</button>

<script>
function myFunction() {
    document.getElementById("myDiv").style.margin = "25px";
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 3

The following code shows how to get the margins of a <div> element.


<!DOCTYPE html>
<html>
<head>
<style>
#myDiv {<!-- w  w w.j  av a  2  s.  c o  m-->
    border: 1px solid black;
}
</style>
</head>
<body>

<div id="myDiv" style="margin:2cm 4cm 3cm 5cm;">This is a div.</div>
<button type="button" onclick="myFunction()">test</button>

<script>
function myFunction() {
    console(document.getElementById("myDiv").style.margin);
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 4

The following code shows how to set the margin property and the padding property.


<!DOCTYPE html>
<html>
<head>
<style>
div {<!--from w  w  w .j ava  2 s .c o  m-->
    border: 1px solid black;
}
</style>
</head>
<body>
<div id="myDiv">This is some text.</div>
<button type="button" onclick="changeMargin()">Set margin</button>
<div id="myDiv2">This is some text.</div>
<button type="button" onclick="changePadding()">Set padding</button>

<script>
function changeMargin() {
    document.getElementById("myDiv").style.margin = "100px";
}

function changePadding() {
    document.getElementById("myDiv2").style.padding = "100px";
}
</script>

</body>
</html>

The code above is rendered as follows: