HTML DOM Style marginTop Property

The Style marginTop property in HTML DOM is used to set or return the top margin of an element.

Syntax:

It returns the marginTop property.

object.style.marginTop

It is used to set the marginTop property.

object.style.marginTop = "length|percentage|auto|initial|
inherit"

Return Values: It returns a string value that represents the top margin of an element

Property Values:

length: It is used to specify the margin in fixed units. Its default value is 0.
percentage: It is used to specify the amount of margin as a percentage relative to the width of the containing element.
auto: If the value is set to 'auto', then the browser automatically calculates a suitable value for the margin size.
initial: It is used to set the property to its default value.
inherit: It is used to inherit the value from its parent element.

Example: In this example, we are using object.style.marginTop = length property.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        DOM Style marginTop Property
    </title>
</head>

<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>

    <b>DOM Style marginTop Property</b>

    <div class="container">
        <div class="div1">Line One</div>
        <div class="div2">Line Two</div>

        <button onclick="setMargin()">
            Change marginTop
        </button>
    </div>

    <!-- Script to set top margin -->
    <script>
        function setMargin() {
            elem = document.querySelector('.div1');
            elem.style.marginTop = '50px';
        }
    </script>
</body>

</html>

Output:

Example: In this example, we are using object.style.marginTop = percentage property.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        DOM Style marginTop Property
    </title>
</head>

<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>

    <b>DOM Style marginTop Property</b>

    <div class="container">
        <div class="div1">Line One</div>
        <div class="div2">Line Two</div>

        <button onclick="setMargin()">
            Change marginTop
        </button>
    </div>

    <!-- Script to set top margin -->
    <script>
        function setMargin() {
            elem = document.querySelector('.div1');
            elem.style.marginTop = '20%';
        }
    </script>
</body>

</html>

Output:

Example: In this example, we are using object.style.marginTop = auto property.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        DOM Style marginTop Property
    </title>
</head>

<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>

    <b>DOM Style marginTop Property</b>

    <div class="container">
        <div class="div1" style="margin-top: 50px;">
            Line One
        </div>

        <div class="div2">
            Line Two
        </div>

        <button onclick="setMargin()">
            Change marginTop
        </button>
    </div>

    <!-- Script to set top margin -->
    <script>
        function setMargin() {
            elem = document.querySelector('.div1');
            elem.style.marginTop = 'auto';
        }
    </script>
</body>

</html>

Output:

Example: In this example, we are using object.style.marginTop = initial property.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        DOM Style marginTop Property
    </title>
</head>

<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>

    <b>DOM Style marginTop Property</b>

    <div class="container">

        <div class="div1" 
             style="margin-top: 50px;">
            Line One
        </div>

        <div class="div2">
            Line Two
        </div>

        <button onclick="setMargin()">
            Change marginTop
        </button>
    </div>

    <!-- Script to set top margin -->
    <script>
        function setMargin() {
            elem = document.querySelector('.div1');
            elem.style.marginTop = 'initial';
        }
    </script>
</body>

</html>

Output:

Example: In this example, we are using object.style.marginTop = inherit property.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        DOM Style marginTop Property
    </title>
</head>

<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>

    <b>DOM Style marginTop Property</b>

    <div class="container">
        <div class="div1" 
             style="margin-top: 50px;">
            Line One
        </div>

        <div class="div2">
            Line Two
        </div>

        <button onclick="setMargin()">
            Change marginTop
        </button>
    </div>

    <!-- Script to set top margin -->
    <script>
        function setMargin() {
            elem = document.querySelector('.div1');
            elem.style.marginTop = 'inherit';
        }
    </script>
</body>

</html>

Output:

Supported Browsers: The browser supported by DOM Style marginTop property are listed below:

Google Chrome 1
Edge 12
Internet Explorer 3
Firefox 1
Opera 3.5
Safari 1

HTML DOM Style marginTop Property

Explore