Style padding Property
Example
Set the padding of a <div> element:
document.getElementById("myDiv").style.padding = "50px 10px 20px 30px";Try it yourself »
Definition and Usage
The padding property sets or returns the padding of an element.
This property can take from one to four values:
Both the margin property and the padding property insert space around an element. However, the difference is that margin inserts the space around the border, while padding inserts the space within the border of an element.
- One value, like: div {padding: 50px} - all four sides will have a padding of 50px
- Two values, like: div {padding: 50px 10px} - the top and bottom padding will be 50px, left and right padding will be 10px
- Three values, like: div {padding: 50px 10px 20px} - the top padding will be 50px, left and right padding will be 10px, bottom padding will be 20px
- Four values, like: div {padding: 50px 10px 20px 30px} - the top padding will be 50px, right padding will be 10px, bottom padding will be 20px, left padding will be 30px
Browser Support
The padding property is supported in all major browsers.
Syntax
Return the padding property:
object.style.padding
Set the padding property:
object.style.padding="%|length|initial|inherit"
Property Values
| Value | Description |
|---|---|
| % | Defines the padding in % of the width of the parent element |
| length | Defines the padding in length units |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
Technical Details
| Default Value: | 0 |
|---|---|
| Return Value: | A String, representing the padding of an element |
| CSS Version | CSS1 |
More Examples
Example
Change the padding of all four sides of a <div> element to "25px":
document.getElementById("myDiv").style.padding = "25px";
Try it yourself »
Example
Return the padding of a <div> element:
alert(document.getElementById("myDiv").style.padding);
Try it yourself »
Example
Difference between the margin property and the padding property:
function changeMargin() {
document.getElementById("myDiv").style.margin = "100px";
}
function changePadding() {
document.getElementById("myDiv2").style.padding = "100px";
}
Try it yourself »
Related Pages
CSS tutorial: CSS Padding
CSS reference: padding property
Style Object
