Style paddingTopProperty
Style Object
Definition and Usage
The paddingTop property sets or returns the top padding of an element.
The padding property defines the space between the element border and the element content.
Syntax
Set the paddingTop property:
Object.style.paddingTop="%|length|inherit"
Return the paddingTop property:
Object.style.paddingTop
| Value | Description |
|---|---|
| % | Defines the top padding as a percentage based on the parent element's width. |
| length | Defines the width of the top padding using units such as px, cm, etc. |
| inherit | The top padding is inherited from the parent element. |
Browser Support
All major browsers support the paddingTop property.
Note:IE7 and earlier versions do not support the "inherit" value. IE8 supports "inherit" only if a !DOCTYPE is specified. 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 top padding of a div element:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example(example.com)</title>
<style type="text/css">
div{
border: 1px solid #FF0000;
}
</style>
<script>
function changeMargin(){
document.getElementById("ex1").style.marginTop="100px";
}
function changePadding(){
document.getElementById("ex2").style.paddingTop="100px";
}
</script>
</head>
<body>
<div id="ex1">This is some text.</div>
<br>
<button type="button" onclick="changeMargin()">Change the top margin of the div element</button>
<br>
<br>
<div id="ex2">This is some text.</div>
<br>
<button type="button" onclick="changePadding()">Change the top padding of the div element</button>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Example(example.com)</title>
<style type="text/css">
div{
border: 1px solid #FF0000;
}
</style>
<script>
function changeMargin(){
document.getElementById("ex1").style.marginTop="100px";
}
function changePadding(){
document.getElementById("ex2").style.paddingTop="100px";
}
</script>
</head>
<body>
<div id="ex1">This is some text.</div>
<br>
<button type="button" onclick="changeMargin()">Change the top margin of the div element</button>
<br>
<br>
<div id="ex2">This is some text.</div>
<br>
<button type="button" onclick="changePadding()">Change the top padding of the div element</button>
</body>
</html>
Try it yourself »
Style Object Other Extensions