Real-World Challenges
Apply the box model to scenarios you'll encounter on real websites.
Step 1 of 6
Style a profile card
Profile cards on sites like LinkedIn and Instagram need internal breathing room and a subtle border to frame the content. Your target:
- Padding: 24px on all sides (space between the text and the card edge)
- Border: 1px on all sides (a thin frame around the card)
The content size is already set — focus on padding and border only.
Tip
Cards almost always use equal padding on all sides for a balanced, professional look. This is one of the most common patterns in web design.
Learn more on MDN
Loading 3D view...
HTML
CSS
PREVIEW
Target to match
Content size:200x100 / 280x160
padding-top: 20/24px
padding-right: 20/24px
padding-bottom: 20/24px
padding-left: 20/24px
border-top: 2/1px
border-right: 2/1px
border-bottom: 2/1px
border-left: 2/1px
margin-top: 10/0px
margin-right: 10/0px
margin-bottom: 10/0px
margin-left: 10/0px
Total size:264x164 / 330x210
Adjust Values
Content
200px
100px
Padding
20px
20px
20px
20px
Border
2px
2px
2px
2px
Margin
10px
10px
10px
10px
Exploded view
View