Padding Properties
CSS padding properties control the space inside an element, between its content and border. Padding ensures proper spacing for readability and design aesthetics.
| Property | Possible Values | Description |
|---|---|---|
padding | px, em, %, auto | Shorthand for setting all four padding sides |
padding-top | px, em, %, auto | Space above the content |
padding-right | px, em, %, auto | Space to the right of the content |
padding-bottom | px, em, %, auto | Space below the content |
padding-left | px, em, %, auto | Space to the left of the content |
Explanation of Values
| Value Type | Description | Example |
px (pixels) | Fixed padding size | padding: 20px; |
% (percentage) | Relative to parent’s width | padding: 10%; |
em / rem | Relative to font size | padding: 2em; |
auto | Browser determines the padding | padding: auto; |
padding: 10px 20px 30px 40px; | Top → Right → Bottom → Left (clockwise) | 10px top, 20px right, 30px bottom, 40px left |
Example
.box {
padding: 20px; /* Adds equal padding on all sides */
}
.container {
padding: 10px 15px 20px 25px; /* Different padding for each side */
}✔ First example applies equal padding
✔ Second example applies different padding values