Skip to content
Related Articles

Related Articles

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:
      length-before
    • 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:
      percentage-before
    • After clicking the button:
      percentage-after
  • 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:
      auto-before
    • 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:
      initial-before
    • After clicking the button:
      initial-after
  • 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>                    

    
    

    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
  • Internet Explorer
  • Firefox
  • Opera
  • Safari

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :