← Lessons
🎨 HTML + CSS for Beginners
The box model
## Every element is a box
In CSS every element is a rectangular **box**. From the outside in:
1. **margin** — space outside (away from other elements)
2. **border** — the frame
3. **padding** — space inside (between the border and the content)
4. **content** — `width` × `height`
```html
<style>
.box {
width: 200px;
height: 100px;
padding: 20px;
border: 3px solid green;
margin: 30px;
border-radius: 10px;
background-color: orange;
}
</style>
<div class="box">Box</div>
```
> 💡 `border: 3px solid green` gives three values at once: thickness, style and colour.
> 🧩 Problems: **HTML/CSS → Level 8**
💡 Want to track which lessons you've read and solve problems for points? Sign up for free or log in.