Style paddingProperty
Style Object
Definition and Usage
The padding property sets or returns the padding of an element.
This property can take from 1 to 4 values:
- If one value is specified, like: div {padding: 50px} - all four paddings are 50px.
- If two values are specified, like: div {padding: 50px 10px} - the top and bottom paddings are 50px, the left and right paddings are 10px.
- If three values are specified, like: div {padding: 50px 10px 20px} - the top padding is 50px, the left and right paddings are 10px, the bottom padding is 20px.
- If four values are specified, like: div {padding: 50px 10px 20px 30px} - the top padding is 50px, the right padding is 10px, the bottom padding is 20px, the left padding is 30px.
Syntax
Set the padding property:
Object.style.padding="%|length|inherit"
Return the padding property:
Object.style.padding
| Value | Description |
|---|---|
| % | Defines a percentage padding based on the width of the parent element. |
| length | Defines the width of the padding using units such as px, cm, etc. |
| inherit | The padding is inherited from the parent element. |
Browser Support
All major browsers support the padding 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
Both the margin property and the padding property 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 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.margin="100px";
}
function changePadding(){
document.getElementById("ex2").style.padding="100px";
}
</script>
</head>
<body>
<div id="ex1">This is some text.</div>
<br>
<button type="button" onclick="changeMargin()">Change the outer margin of the div element</button>
<br>
<br>
<div id="ex2">This is some text.</div>
<br>
<button type="button" onclick="changePadding()">Change the 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.margin="100px";
}
function changePadding(){
document.getElementById("ex2").style.padding="100px";
}
</script>
</head>
<body>
<div id="ex1">This is some text.</div>
<br>
<button type="button" onclick="changeMargin()">Change the outer margin of the div element</button>
<br>
<br>
<div id="ex2">This is some text.</div>
<br>
<button type="button" onclick="changePadding()">Change the padding of the div element</button>
</body>
</html>
Try it Yourself »
Style Object Other Extensions