Javascript DOM CSS Style marginBottom Property

Introduction

Set the bottom margin of a <div> element: 

document.getElementById("myDiv").style.marginBottom = "50px";

View in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
#myDiv {//from w w  w .jav a  2  s .c  om
  border: 1px solid #FF0000;
}
</style>
</head>
<body>

<div id="myDiv">This is a div.</div>
<br>
<button type="button" onclick="myFunction()">Set bottom margin</button>

<script>
function myFunction() {
  document.getElementById("myDiv").style.marginBottom = "50px";
}
</script>

</body>
</html>

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

Both the margin property and the padding property insert space around an element.

The margin inserts the space around the border.

The padding inserts the space within the border of an element.

Property Values

Value Description
% Sets the bottom margin in % of the width of the parent element
length Sets the bottom margin in length units
autoThe browser sets the bottom margin
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

The marginBottom property Default Value: 0

The marginBottom property returns a String representing the bottom margin of an element.




PreviousNext

Related