# CSS Box Model

### Wat is het CSS Box Model?

In CSS wordt elk element op een webpagina beschouwd als een rechthoekige doos. Het **CSS Box Model** beschrijft deze doos en bestaat uit:

1. **Content**: De inhoud van het element (tekst, afbeeldingen, enz.).
2. **Padding**: Ruimte rondom de content, binnen de rand.
3. **Border**: De rand om de padding en content heen.
4. **Margin**: Ruimte buiten de rand, scheidt het element van andere elementen.

### Visualisatie van het Box Model

[![box-model-1358225844.png](https://www.digitaallab.nl/uploads/images/gallery/2024-10/scaled-1680-/box-model-1358225844.png)](https://www.digitaallab.nl/uploads/images/gallery/2024-10/box-model-1358225844.png)

### Eigenschappen van het Box Model

- **Content**: `width`, `height`
- **Padding**: `padding-top`, `padding-right`, `padding-bottom`, `padding-left`
- **Border**: `border-width`, `border-style`, `border-color`
- **Margin**: `margin-top`, `margin-right`, `margin-bottom`, `margin-left`

**Voorbeeld**

```css
.box {
    width: 200px;
    height: 100px;
    padding: 10px;
    border: 5px solid black;
    margin: 20px;
}
```

**Uitleg:**

- `width` en `height` bepalen de grootte van de content.
- `padding` voegt ruimte toe binnen de border.
- `border` definieert de rand rondom het element.
- `margin` voegt ruimte toe buiten de border, tussen dit element en anderen.