HTML | DOM Style marginTop Property

Difficulty Level : Basic
Last Updated : 01 Aug, 2019

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"

Property Values:

length: It is used to specify the margin in fixed units. Its default value is 0.

Example:

<!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:

Before clicking the button:
After clicking the button:

percentage: It is used to specify the amount of margin as a percentage relative to the width of the containing element.

Example:

<!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:

Before clicking the button:
After clicking the button:

auto: If the value is set to ‘auto’, then the browser automatically calculates a suitable value for the margin size.

Example:

<!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:

Before clicking the button:
After clicking the button:

initial: It is used to set the property to its default value.

Example:

<!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:

Before clicking the button:
After clicking the button:

inherit: It is used to inherit the value from its parent element.

Example:

<!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>                    