In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > style handling > properties > margin

margin style property

Browser support:

Specifies or returns a shorthand property for setting the top, right, bottom and left margins, in that order.

The margin property is nearly equivalent to the padding property. Both insert space around an element, but while padding inserts the space within, margin inserts it around the border of the element.

Syntax:

object.margin;

You can find the related objects in the Supported by objects section below.

This property is read/write.

CSS page for this property: margin

Possible values:

The type of this property is string.

One of the following values:

•

This value can be used from 1 to 4 times (use the space character to separate them)

•

One of the following values:

•	<size in length>
•	size in percentage
•	auto

•

inherit

Description of values:

auto

Default. The sizes of the 'auto' margins are equal.

inherit

Takes the value of this property from the computed style of the parent element.

size in length

The size of the margin in length units. For the supported length units, see the length page.

size in percentage

The size is the specified percentage of the width of the parent element.

Default: this property has no default value.

If only one margin value is set, it is used for all four margins.
If two margin values are specified, the first value is used for the top and bottom margins, the second one is for the left and right margins.
If three margin values are set, the first value is used for the top margin, the second one is for the left and right margins and the third one is for the bottom margin.
If four margin values are specified, the order is top, right, bottom, left (clockwise from top).

Example HTML code 1:

This example illustrates the use of the border, margin and padding properties:

<head>
    <style>
        .outer {
            border: 1px solid #ffffff;
            background-color: #ffb08a;
        }
        .middle {
            margin: 20px;
            padding: 20px;
            border: 10px solid #000000;
            background-color: #ceb379;
        }
        .inner {
            height: 10px;
            border: 1px solid #ffffff;
            background-color: #ffffff;
        }
    </style>
</head>
<body>
    <table cellpadding="0px" cellspacing="10px">
        <tr>
            <td style="background-color: #ffb08a;">&nbsp;</td>
            <td>margin</td>
            <td style="background-color: #000000;">&nbsp;</td>
            <td>border</td>
            <td style="background-color: #ceb379;">&nbsp;</td>
            <td>padding</td>
        </tr>
    </table>
    
    <div class="outer">
        <div class="middle">
            <div class="inner"></div>
        </div>
    </div>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the margin property in JavaScript:

<head>
    <style>
        .outer {
            border: 1px solid #ffffff;
            background-color: #ffb08a;
        }
        .middle {
            margin: 20px;
            padding: 20px;
            border: 10px solid #000000;
            background-color: #ceb379;
        }
        .inner {
            height: 10px;
            border: 1px solid #ffffff;
            background-color: #ffffff;
        }
    </style>
    <script type="text/javascript">
        function ChangeMargin () {
            var middleDiv = document.getElementById ("middleDiv");
            var marginInput = document.getElementById ("marginInput");

            middleDiv.style.margin = marginInput.value + "px";
        }
    </script>
</head>
<body>
    <table cellpadding="0px" cellspacing="10px">
        <tr>
            <td style="background-color: #ffb08a;">&nbsp;</td>
            <td>margin</td>
            <td style="background-color: #000000;">&nbsp;</td>
            <td>border</td>
            <td style="background-color: #ceb379;">&nbsp;</td>
            <td>padding</td>
        </tr>
    </table>
    <div class="outer">
        <div id="middleDiv" class="middle">
            <div class="inner"></div>
        </div>
    </div>
    <br />
    margin: 
    <input id="marginInput" type="text" value="10" size="2"/> 
    <button onclick="ChangeMargin ();">Change</button>
</body>