The padding property adds space inside an element, between the content and the border.

Margin vs Padding

• Margin: Space outside the border (between elements)
• Padding: Space inside the border (around content)

Individual Properties

Set padding on specific sides:

.box {
  padding-top: 20px;
  padding-right: 15px;
  padding-bottom: 20px;
  padding-left: 15px;
}

Shorthand Syntax

The padding shorthand works exactly like margin:

1 value - All sides

padding: 20px;

2 values - Vertical | Horizontal

padding: 20px 10px;

3 values - Top | Horizontal | Bottom

padding: 20px 10px 30px;

4 values - Top | Right | Bottom | Left (clockwise)

padding: 20px 10px 30px 5px;

Accepted Values

Padding accepts:

• Pixels: padding: 20px
• Em/Rem: padding: 1.5em
• Percentage (relative to parent width): padding: 5%

Key Differences from Margin

1. No negative values: Padding cannot be negative
2. No collapsing: Adjacent padding values don’t collapse
3. Background shows through: Padding area displays the element’s background
4. Clickable area: Padding is part of the clickable area for links and buttons

Common Use Cases

Button Styling

.button {
  padding: 12px 24px;  /* Vertical | Horizontal */
}

Card Content

.card {
  padding: 20px;
}

Input Fields

input {
  padding: 8px 12px;
}

Lessons in this unit:

0:	Introduction
1:	Understanding the CSS Box Model
2:	How to Use CSS Box Sizing
3:	How to Use CSS Margin
4:	▶︎ How to Use CSS Padding
5:	How to Style CSS Borders