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:
<!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:
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:
<!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:
After clicking the button:
3. 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:
After clicking the button:
4. 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:
After clicking the button:
5. 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:
After clicking the button:
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