Mastery Points
0
Active Mission
Mission: Increase the 'padding' to '40px' to grow the box internally.
Objective: add padding: 40px to the code
Current MissionIN PROGRESS
Riddle:Mission: Increase the 'padding' to '40px' to grow the box internally.
33%
Reward: 60 XP Verified
The Box Model: Layout Architecture in html-css
Visual Guide
Context & Logic
Every element is a box. Understanding dimensions is critical for predictable layouts.
Technical Reference
Content layerThe real item (text or image) inside the box.
Padding spaceTransparent area between content and border.
Border lineThe visual stroke wrapping the padding and content.
Margin pushExternal space that pushes other boxes away.
box-sizing borderPadding stays inside the defined width (Industry Standard).
box-sizing contentPadding adds to the width (Legacy Default).
margin autoCenters horizontally if a width is defined.
Interactive Workshop
Interactive Playground
Source HTMLMarkup
Source CSSStyle
Live Output Pane
Sync activeTailwind Core Loaded
Standard CSS Scope
Auto-Sync Preview
Modify the source above to see live changes. Supports standard CSS and Tailwind utility classes.
Test Your Knowledge
Assessment Mode1With 'border-box', if width=100px and padding=20px, what is the final width?