The padding property is a shorthand used to set each of the four sides instead of using separate properties padding-top, padding-right, padding-bottom, padding-left.
Examples
/* each side separately: top, right, bottom, left */
padding: 10px 20px 10px 20px;
/* top and bottom, left and right */
padding: 2% 5%;
/* set padding to all four sides */
padding: 2em;
/* top | left and right | bottom */
padding: 2em 1em 2em;
The padding property can be defined using one, two, three, or four values. Negative values are invalid.
Properties
| Property | Description |
|---|---|
| padding | defines all padding properties in one declaration |
| padding-top | defines top padding of an element |
| padding-right | defines right padding of an element |
| padding-bottom | defines bottom padding of an element |
| padding-left | defines left padding of an element |
Values
| Value | Description |
|---|---|
| length | sets a padding in px, em, pt, cm, etc. |
| % | sets a padding in percentage of the width of the containing element |
| inherit | used to inherit the value from the parent element |
