🎯 Challenge: Set padding to 30px — drag the slider!
Step 1 of 5
📦 Box Model
In Lesson 6 you styled text with fonts and sizes. Now learn the secret of web pages: every element is a box! You can control the space inside, outside, and around each box. 🎮
↔️Padding — space between the content and the border (inside).
🔲Border — the visible edge around your content.
↕️Margin — space between this box and other things (outside).
🎨Colors — each layer has its own color so you can see it!
👇 Drag the sliders and watch the colored layers grow and shrink!
✅ Box Model Mastered!
Awesome! You now understand the CSS Box Model — the foundation of every webpage layout!
📖 What you learned
padding — space between content and the border (inside the box)
margin — space outside the border (pushes other elements away)
border — the visible edge around your content
Every HTML element is a rectangular box with these layers!
👉 Next lesson: Layout Builder — arrange boxes side by side with Flexbox!