Box Model Challenges
Test your understanding by matching target box models.
Step 1 of 3
Challenge 1: Spacious padding
Create a box with generous internal spacing. Your target:
- Content size: 250px wide, 120px tall
- Padding: 40px on all four sides
This amount of padding is typical for hero sections and large call-to-action cards.
Tip
When all four sides have the same value, you can use the shorthand padding: 40px instead of setting each side individually.
Learn more on MDN
Loading 3D view...
HTML
CSS
PREVIEW
Target to match
Content size:200x100 / 250x120
padding-top: 20/40px
padding-right: 20/40px
padding-bottom: 20/40px
padding-left: 20/40px
border-top: 2/0px
border-right: 2/0px
border-bottom: 2/0px
border-left: 2/0px
margin-top: 10/0px
margin-right: 10/0px
margin-bottom: 10/0px
margin-left: 10/0px
Total size:264x164 / 330x200
Adjust Values
Content
200px
100px
Padding
20px
20px
20px
20px
Border
2px
2px
2px
2px
Margin
10px
10px
10px
10px
Exploded view
View