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