Javascript Reference - HTML DOM Style paddingBottom Property

The paddingBottom property sets or get the bottom padding.

Browser Support


`paddingBottom`	Yes	Yes	Yes	Yes	Yes

Syntax

Return the paddingBottom property:

var v = object.style.paddingBottom;

Set the paddingBottom property:

object.style.paddingBottom=%|length|initial|inherit'

Property Values

Value	Description
%	Set the bottom padding in percent of the width of the container element
length	Set the bottom padding in length units
initial	Set to default value.
inherit	Inherits from parent element.

Technical Details

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

Example

The following code shows how to set the bottom padding.


<!DOCTYPE html>
<html>
<head>
<style>
#myDiv {<!-- w  ww .  j av  a  2s . c om-->
    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.paddingBottom = "50px";
}
</script>
</body>
</html>

The code above is rendered as follows:

Example 2

The following code shows how to get the bottom padding.


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

The code above is rendered as follows:

Example 3

The following code shows how to set marginBottom and paddingBottom.


<!DOCTYPE html>
<html>
<head>
<style>
div {<!--from   w  ww .  jav a2 s.  c  o m-->
    border: 1px solid #FF0000;
}
</style>
</head>
<body>
<div id="myDiv">This is some text.</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 = "100px";
}

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

</body>
</html>

The code above is rendered as follows: