Style paddingBottomProperty
Style Object
Definition and Usage
The paddingBottom property sets or returns the bottom padding of an element.
Syntax
Setting the paddingBottom property:
Object.style.paddingBottom="%|length|inherit"
Returning the paddingBottom property:
Object.style.paddingBottom
| Value | Description |
|---|---|
| % | Defines the bottom padding as a percentage of the parent element's width. |
| length | Defines the bottom padding in units such as px, cm, etc. |
| inherit | The bottom padding is inherited from the parent element. |
Browser Support
All major browsers support the paddingBottom property.
Note:IE7 and earlier versions do not support the "inherit" value. IE8 supports "inherit" only if a !DOCTYPE is declared. IE9 supports "inherit".
Tips and Notes
The margin and padding properties both insert space around an element. However, the difference is that margin inserts space around the outside of the border, while padding inserts space inside the element's border.
Example
Example
Change the bottom padding 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()">Change the bottom margin of the div element</button>
<br>
<br>
<div id="ex2">This is some text.</div>
<br>
<button type="button" onclick="changePadding()">Change the bottom padding 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()">Change the bottom margin of the div element</button>
<br>
<br>
<div id="ex2">This is some text.</div>
<br>
<button type="button" onclick="changePadding()">Change the bottom padding of the div element</button>
</body>
</html>
Try it yourself »
Style Object Other Extensions