HTML - DOM Style Object margin Property

Quiz

HTML DOM Style Object margin property sets or returns margins of an element. We can set margin for individual sides.

It accepts upto four values

One Value: For one value, all four margins will be of same. For example: div {margin: 20px}.
two Value: For two value, top and bottom margins will be same , left and right margins will be same. For example: div {margin: 20px 40px}.
Three Value: For three value, top and bottom margins will be of different size whereas left and right margins will be of same size. For example: div {margin: 20px 40px 60px}.
Four Value: For four value, all margins will have different size. For example: div {margin: 20px 40px 60px 10%}.

Syntax

Set the margin property:

object.style.margin= "percentage | length | auto | initial | inherit";

Get the margin property:

object.style.margin;

Property Values

Value	Description
percentage	It specifies margins in width percent of parent element.
length	It specifies margin in length units.
auto	It lets browser set the margin.
initial	It is used to set this property to it's default value.
inherit	It is used to inherit the property of it's parent element.

Return Value

It returns a string value which represents margins of an element.

Examples of HTML DOM Style Object 'margin' Property

The following example sets the margin for a div element.

Set margin for div Element

This example sets same margin for all sides of div element.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object margin Property
    </title>
</head>
<body>
    <style>
        div {
            border: 2px solid #04af2f;
        }
    </style>
    <h3>
        Click to set line height.
    </h3>
    <button onclick="fun()">Set Margin</button>
    <br>
    <br>
    <div id="margin">
        <p>Welcome to Tutorials Point.</p>
    </div>
    <script>
        function fun() {
            document.getElementById("margin")
                .style.margin = "20px";
        }
    </script>
</body>
</html>

Set Different margins for div Element

This example sets different margins for different side of div element.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object margin Property
    </title>
</head>
<body>
    <style>
        div {
            border: 2px solid #04af2f;
        }
        #margin {
            border: 1px solid black;
        }
    </style>
    <h3>
        Click to set line height.
    </h3>
    <button onclick="fun()">Set Margin</button>
    <button onclick="funTwo()">Two Values</button>
    <button onclick="funThree()">Three Values</button>
    <button onclick="funFour()">Four values</button>
    <br>
    <br>
    <div>
    <div id="margin">
        <p>Welcome to Tutorials Point.</p>
    </div>
    </div>
    <script>
        function fun() {
            document.getElementById("margin")
                .style.margin = "20px";
        }
        function funTwo() {
            document.getElementById("margin")
                .style.margin = "20px 40px";
        }
        function funThree() {
            document.getElementById("margin")
                .style.margin = "20px 40px 60px";
        }
        function funFour() {
            document.getElementById("margin")
                .style.margin = "20px 40px 30px 20%";
        }
    </script>
</body>
</html>

Supported Browsers

Property
margin	Yes 1	Yes 12	Yes 1	Yes 1	Yes 3.5

html_dom.htm

Print Page