Javascript Reference - HTML DOM Style marginBottom Property








The marginBottom property sets or gets the bottom margin of an element.

Browser Support

marginBottom Yes Yes Yes Yes Yes

Syntax

Return the marginBottom property:

var v = object.style.marginBottom

Set the marginBottom property:

object.style.marginBottom='%|length|auto|initial|inherit'

Property Values

Value Description
% Set the bottom margin in percent of the container element width
length Set the bottom margin in length units
auto Let browser set the bottom margin
initial Sets to default value.
inherit Inherits this property from parent element.




Technical Details

Default Value: 0
Return Value: A string representing the bottom margin
CSS Version CSS1

Example

The following code shows how to set the bottom margin of a <div> element:


<!DOCTYPE html>
<html>
<head>
<style>
#myDiv {<!--from   ww w .java 2s. c o  m-->
    border: 1px solid #FF0000;
}
</style>
</head>
<body>
<div id="myDiv">This is a div.</div>
<button type="button" onclick="myFunction()">test</button>
<script>
function myFunction() {
    document.getElementById("myDiv").style.marginBottom = "40px";
}
</script>
</body>
</html>

The code above is rendered as follows:





Example 2

The following code shows how to change the bottom margin of a <div> element.


<!DOCTYPE html>
<html>
<head>
<style>
#myDiv {<!--from   ww  w.j  a  v a2  s. c om-->
    border: 1px solid #FF0000;
    margin-bottom: 75px;
}
</style>
</head>
<body>
<div id="myDiv">This is a div.</div>
<button type="button" onclick="myFunction()">test</button>
<script>
function myFunction() {
    document.getElementById("myDiv").style.marginBottom = "5px";
}
</script>
</body>
</html>

The code above is rendered as follows:

Example 3

The following code shows how to get the bottom margin of a <div> element.


<!DOCTYPE html>
<html>
<head>
<style>
#myDiv {<!-- w ww  .  j av a 2  s  .  c  o m-->
    border: 1px solid #FF0000;
}
</style>
</head>
<body>
<div id="myDiv" style="margin-bottom:5cm;">This is a div.</div>
<button type="button" onclick="myFunction()">test</button>
<script>
function myFunction() {
    console.log(document.getElementById("myDiv").style.marginBottom);
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 4

The following code shows how to set marginBottom and paddingBottom.


<!DOCTYPE html>
<html>
<head>
<style>
div {<!--from www.  j  ava 2s. c o  m-->
    border: 1px solid black;
}
</style>
</head>
<body>
<div id="myDiv">This is a div.</div>
<button type="button" onclick="changeMargin()">bottom margin</button>
<div id="myDiv2">This is some text.</div>
<button type="button" onclick="changePadding()">bottom padding</button>
<script>
function changeMargin() {
    document.getElementById("myDiv").style.marginBottom = "80px";
}

function changePadding() {
    document.getElementById("myDiv2").style.paddingBottom = "80px";
}
</script>

</body>
</html>

The code above is rendered as follows: