Style marginBottomProperty
Style object
Definition and Usage
The marginBottom property sets or returns the bottom margin of an element.
Syntax
Set the marginBottom property:
Object.style.marginBottom="%|length|auto|inherit"
Return the marginBottom property:
Object.style.marginBottom
| Value | Description |
|---|---|
| % | Defines the bottom margin as a percentage based on the parent element's width. |
| length | Defines the bottom margin width using units such as px, cm, etc. |
| auto | The bottom margin set by the browser. |
| inherit | The bottom margin is inherited from the parent element. |
Browser Support
All major browsers support the marginBottom property.
Note:IE7 and earlier versions do not support the "inherit" value. IE8 supports "inherit" only if a !DOCTYPE is specified. IE9 supports "inherit".
Tips and Notes
Both the margin and padding properties insert space around an element. However, the difference is that margin inserts space around the outside of the border, while padding inserts space within the element's border.
Example
Example
Change the bottom margin of a div element:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example Tutorial(example.com)</title>
<style type="text/css">
div{
border: 1px solid #FF0000;
}
</style>
<script>
function changeMargin(){
document.getElementById("ex1").style.marginBottom="100px";
}
function changePadding(){
document.getElementById("ex2").style.paddingBottom="100px";
}
</script>
</head>
<body>
<div id="ex1">This is some text.</div>
<br>
<button type="button" onclick="changeMargin()">Modify the bottom outer spacing of the div element</button>
<br>
<br>
<div id="ex2">This is some text.</div>
<br>
<button type="button" onclick="changePadding()">Modify the bottom inner spacing of the div element</button>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Example Tutorial(example.com)</title>
<style type="text/css">
div{
border: 1px solid #FF0000;
}
</style>
<script>
function changeMargin(){
document.getElementById("ex1").style.marginBottom="100px";
}
function changePadding(){
document.getElementById("ex2").style.paddingBottom="100px";
}
</script>
</head>
<body>
<div id="ex1">This is some text.</div>
<br>
<button type="button" onclick="changeMargin()">Modify the bottom outer spacing of the div element</button>
<br>
<br>
<div id="ex2">This is some text.</div>
<br>
<button type="button" onclick="changePadding()">Modify the bottom inner spacing of the div element</button>
</body>
</html>
Try it yourself »
Style object Other Extensions