Javascript DOM CSS Style paddingBottom Property

Introduction

Set the bottom padding of a <div> element: 

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

View in separate window 

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

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

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

</body>
</html>

The paddingBottom property sets or gets the bottom padding of 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 padding in % of the width of the parent element
length Sets the bottom padding in length units
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

The paddingBottom property Default Value: 0

The paddingBottom property returns a String representing the bottom padding of an element.




PreviousNext

Related