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:
length-after

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:
auto-after

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>                     