Give #box 16px padding on every side.
Acceptance criteria
- 1.Give #box 16px padding on every side.
CSS Tutorial · CSS Box Model
These 10 tasks go with the CSS Padding chapter. 5 of them ask you to build something small from scratch; 5 give you code that is already broken and ask you to work out why. Set aside about 90 minutes for the whole set, though you can do them in any order.
Nothing here is marked by a person. When you press Submit, the editor checks your code against the points listed under each task and tells you straight away what passed and what didn't (you need a free account to submit). If you get stuck, there are hints, and a worked solution once you've had a go. The first 2 tasks are free; the rest are part of the practice plan.
If it's been a while since you read the chapter, here is how it starts: “Control space between content and borders with shorthand, logical properties, percentages, and box-sizing-aware dimensions.” Read the chapter.
1.Add padding on all sidesexercise · easy · 10 min
Give #box 16px padding on every side.
Passes when: Give #box 16px padding on every side.
2.Add padding to one sideexercise · easy · 10 min · practice plan
Give #box 24px of left padding only.
Passes when: Give #box 24px of left padding only.
3.Use the two-value shorthandexercise · easy · 10 min · practice plan
Give #box 8px vertical and 20px horizontal padding.
Passes when: Give #box 8px vertical and 20px horizontal padding.
4.Use the four-value shorthandexercise · easy · 10 min · practice plan
Set padding top 4px, right 8px, bottom 12px, left 16px.
Passes when: Set padding top 4px, right 8px, bottom 12px, left 16px.
5.Pad with rem unitsexercise · medium · 10 min · practice plan
Give #box 1.5rem padding (24px).
Passes when: Give #box 1.5rem padding (24px).
6.Fix margin used instead of paddingbug fix · easy · 8 min
Space inside the element is padding.
Passes when: Space inside the element is padding.
7.Fix the four-value orderbug fix · easy · 8 min · practice plan
The shorthand runs top, right, bottom, left — this one is reversed.
Passes when: The shorthand runs top, right, bottom, left — this one is reversed.
8.Fix the missing unitbug fix · easy · 8 min · practice plan
Padding needs a unit to take effect.
Passes when: Padding needs a unit to take effect.
9.Fix the wrong sidebug fix · easy · 8 min · practice plan
The padding was applied on the right instead of the left.
Passes when: The padding was applied on the right instead of the left.
10.Fix the invalid negative paddingbug fix · easy · 8 min · practice plan
Padding cannot be negative, so the rule is dropped.
Passes when: Padding cannot be negative, so the rule is dropped.
Between them these tasks cover Padding shorthand and Per-side padding.
Looking for a different chapter? See every practice set, or switch to the interview theory questions.