Padding

Learn padding, the inner spacing.

What is padding?

padding is the inner space between content and border. It keeps content slightly away from the frame and improves readability. padding takes the box's background color, so it shows on a colored layer.

Each side can be set separately: padding-top, padding-right, padding-bottom, padding-left. Padding cannot be negative; it takes zero or positive values.

padding shorthand

Instead of writing each side, you can use the padding shorthand. A single value applies the same space to every side: padding: 12px.

Two values mean vertical then horizontal: padding: 12px 24px (top-bottom 12, left-right 24). Four values are read clockwise: top, right, bottom, left: padding: 8px 16px 12px 16px.

Exercise Four sides with padding shorthand

For the .notice selector, use the padding shorthand to set all four sides: top 8px, right 16px, bottom 8px, left 16px. That is padding: 8px 16px 8px 16px.

Show example solution

.notice {
  padding: 8px 16px 8px 16px;
}

Test yourself

Four values clockwise

.box {
  padding: ____;
}

Show answer

.box {
  padding: 8px 16px 12px 16px;
}

What does padding: 12px 24px mean?
- Top-left, bottom-right
- Only left and right
- Left-right, then top-bottom
- Top-bottom, then left-right
Show answer

Top-bottom, then left-right — Correct. Two values set vertical (top-bottom) first, then horizontal (left-right).
Match value count to its meaning

1 value

Same space on every side
2 values

Top-bottom and left-right
3 values

Top, left-right, bottom
4 values

Top, right, bottom, left

Next lesson: Margin

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies