Style padding
Property
Definition and Usage
The padding
property sets or returns the padding within an element.
This property can take from 1 to 4 values:
If one value is specified, e.g.,
div {padding: 50px}
- all four paddings are 50px.If two values are specified, e.g.,
div {padding: 50px 10px}
- the top and bottom paddings are 50px, and the left and right paddings are 10px.If three values are specified, e.g.,
div {padding: 50px 10px 20px}
- the top padding is 50px, the left and right paddings are 10px, and the bottom padding is 20px.If four values are specified, e.g.,
div {padding: 50px 10px 20px 30px}
- the top padding is 50px, the right padding is 10px, the bottom padding is 20px, and the left padding is 30px.
Syntax
Set the padding
property:
Return the padding
property:
Value | Description |
---|---|
% | Defines the padding based on the width of the parent element. |
length | Defines the padding width using units like 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 an !DOCTYPE is specified. IE9 supports "inherit".
Tips and Notes
Both the margin
and padding
properties insert space around an element. However, the difference is that margin
inserts space outside the border, while padding
inserts space inside the border.
Example
Change the padding of a div element: