Skip to content
Related Articles

Related Articles

HTML | DOM Style marginTop Property

View Discussion
Improve Article
Save Article
  • Difficulty Level : Basic
  • Last Updated : 08 Aug, 2022

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:

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

Example: 

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:

  • Before clicking the button:

 length-before

  • After clicking the button:

 

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

Example: 

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:

  • Before clicking the button:

 percentage-before

  • After clicking the button:

 percentage-after

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

Example: 

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:

  • Before clicking the button:

 auto-before

  • After clicking the button:

 

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

Example: 

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:

  • Before clicking the button:

 initial-before

  • After clicking the button:

 initial-after

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

Example: 

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:

  • Before clicking the button:

 inherit-before

  • After clicking the button:

 inherit-after

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

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!