🎯 Interactive Box Model Visualizer
Adjust the values below to see how the box model works in real-time:
📊 Calculated Dimensions:
📦 Box Sizing Comparison
See the difference between content-box and border-box:
box-sizing: content-box (default)
Width: 200px
Padding: 20px
Border: 5px
Total: 250px
box-sizing: border-box
Width: 200px
Padding: 20px
Border: 5px
Total: 200px
Click to see how box-sizing affects dimensions
🔄 Margin Collapsing Demonstration
Vertical margins between elements can collapse. See it in action:
margin-bottom: 30px
margin-top: 20px
🎯 Padding vs Margin: Visual Comparison
Understanding when to use padding versus margin:
Using Padding
✅ Padding extends the clickable area
✅ Background color fills padding
✅ Good for buttons and clickable elements
Using Margin
❌ Margin creates space outside element
❌ Background doesn't extend to margin
✅ Good for spacing between elements
Try clicking both elements above to see the difference!
🖼️ Border Styles Showcase
Explore different border properties:
🎨 Border Customizer
💪 Practice Exercises
Test your understanding with these interactive challenges:
Exercise 1: Create a Card Layout
Adjust the properties to match the target design:
Target Design:
Your Design:
📚 Quick Reference
Box Model Properties
width, height- Content areapadding- Space inside borderborder- Element boundarymargin- Space outside border
Box Sizing Values
content-box- Default behaviorborder-box- Include padding/border
Shorthand Syntax
margin: 10px;- All sidesmargin: 10px 20px;- V | Hmargin: 10px 20px 15px;- T | H | Bmargin: 10px 20px 15px 25px;- T R B L