Skip to content
Related Articles

Related Articles

HTML | DOM Style marginBottom Property
  • Difficulty Level : Basic
  • Last Updated : 01 Aug, 2019

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

Syntax:

  • It returns the bottom margin of element.
    object.style.marginBottom
  • It is used to set the bottom margin of an element.
    object.style.marginBottom = "length|percentage|auto|initial|
    inherit"

Property Values:

  • length: It is used to set margin to fixed units. Its default value is 0.

    Example:




    <!DOCTYPE html>
    <html>
          
    <head>
        <title>
            DOM Style marginBottom Property
        </title>
    </head>
      
    <body>
        <h1 style="color: green">
            GeeksforGeeks
        </h1>
          
        <b>DOM Style marginBottom Property</b>
          
        <div class="container">
            <div class="div1">Line One</div>
            <div class="div2">Line Two</div>
              
            <button onclick="setMargin()">
                Change marginBottom
            </button>
        </div>
          
        <!-- Script to set bottom margin -->
        <script>
            function setMargin() {
                elem = document.querySelector('.div1');
                elem.style.marginBottom = '50px';
            }
        </script>
    </body>
      
    </html>                    

    Output:
    Before clicking the button:
    length-before1
    After clicking the button:
    length-after1

  • 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 marginBottom Property
        </title>
    </head>
      
    <body>
        <h1 style="color: green">
            GeeksforGeeks
        </h1>
          
        <b>DOM Style marginBottom Property</b>
          
        <div class="container">
            <div class="div1">Line One</div>
            <div class="div2">Line Two</div>
              
            <button onclick="setMargin()">
                Change marginBottom
            </button>
        </div>
          
        <!-- Script to set bottom margin -->
        <script>
            function setMargin() {
                elem = document.querySelector('.div1');
                elem.style.marginBottom = '10%';
            }
        </script>
    </body>
      
    </html>                    

    Output:
    Before clicking the button:
    length-before1
    After clicking the button:
    length-after1

  • 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 marginBottom Property
        </title>
    </head>
      
    <body>
        <h1 style="color: green">
            GeeksforGeeks
        </h1>
          
        <b>DOM Style marginBottom Property</b>
          
        <div class="container">
              
            <div class="div1" style="margin-bottom:50px;">
                Line One
            </div>
              
            <div class="div2">
                Line Two
            </div>
              
            <button onclick="setMargin()">
                Change marginBottom
            </button>
        </div>
          
        <!-- Script to set bottom margin -->
        <script>
            function setMargin() {
                elem = document.querySelector('.div1');
                elem.style.marginBottom = 'auto';
            }
        </script>
    </body>
      
    </html>                    

    Output:
    Before clicking the button:
    length-after1
    After clicking the button:
    length-before1

  • initial: This is used to set the property to its default value.
    Example:




    <!DOCTYPE html>
    <html>
          
    <head>
        <title>
            DOM Style marginBottom Property
        </title>
    </head>
      
    <body>
        <h1 style="color: green">
            GeeksforGeeks
        </h1>
          
        <b>DOM Style marginBottom Property</b>
          
        <div class="container">
              
            <div class="div1" style="margin-bottom:50px;">
                Line One
            </div>
              
            <div class="div2">
                Line Two
            </div>
              
            <button onclick="setMargin()">
                Change marginBottom
            </button>
        </div>
          
        <!-- Script to set bottom margin -->
        <script>
            function setMargin() {
                elem = document.querySelector('.div1');
                elem.style.marginBottom = 'initial';
            }
        </script>
    </body>
      
    </html>                    

    Output:
    Before clicking the button:
    length-after1
    After clicking the button:
    length-before1

  • inherit: This is used to inherit the value from the element’s parent.
    Example:




    <!DOCTYPE html>
    <html>
          
    <head>
        <title>
            DOM Style marginBottom Property
        </title>
    </head>
      
    <body>
        <h1 style="color: green">
            GeeksforGeeks
        </h1>
          
        <b>DOM Style marginBottom Property</b>
          
        <div class="container" style="margin-bottom:50px;">
              
            <div class="div1">
                Line One
            </div>
              
            <div class="div2">
                Line Two
            </div>
              
            <button onclick="setMargin()">
                Change marginBottom
            </button>
        </div>
          
        <!-- Script to set bottom margin -->
        <script>
            function setMargin() {
                elem = document.querySelector('.div1');
                elem.style.marginBottom = 'inherit';
            }
        </script>
    </body>
      
    </html>                    

    Output:
    Before clicking the button:
    length-before1
    After clicking the button:
    length-after1

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

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari
My Personal Notes arrow_drop_up
Recommended Articles
Page :