Skip to content
Related Articles

Related Articles

HTML | DOM Style marginBottom Property

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

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"

Return Values: It returns a string value, which represents the bottom margin of an element.

Property Values:

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

Example: 

html




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

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

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

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

Example: 

html




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

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

Example: 

html




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