CSS Tutorial
CSS Padding
Padding in CSS is the space between the content and the element’s border. It creates inner spacing and improves layout readability and design. Padding is applied inside the element (unlike margin, which is outside).
Why Use Padding?
- Adds breathing space inside elements
- Improves readability
- Enhances UI spacing and aesthetics
- Increases clickable area for buttons and links
- Works with backgrounds (background color/image extends under padding)
CSS Padding Properties
| Property | Description |
|---|---|
| padding-top | Sets padding at the top |
| padding-right | Sets padding on the right |
| padding-bottom | Sets padding at the bottom |
| padding-left | Sets padding on the left |
| padding | Shorthand to set all padding values at once |
Padding Shorthand Syntax
The padding shorthand can accept 1 to 4 values:
1 Value
padding: 20px;
/* applies to all sides */
2 Values
padding: 10px 20px;
/* top-bottom = 10px, left-right = 20px */
3 Values
padding: 10px 20px 30px;
/* top = 10px, left/right = 20px, bottom = 30px */
4 Values
padding: 10px 20px 30px 40px;
/* top, right, bottom, left (clockwise) */
Padding with Percentages
Percentages are based on the container’s width, not height:
padding: 5%;
Padding & box-sizing
By default, padding adds to the element’s width/height.
width: 200px;
padding: 20px;
Actual element width = 200 + 20 + 20 = 240px
To avoid this, use:
box-sizing: border-box;
This makes width include padding + border.
Example
.card {
background: #f0f0f0;
padding: 20px;
border: 1px solid #ccc;
}