Het CSS-boxmodel is een fundamenteel concept in CSS dat de ontwerplay-out van elk HTML-element op een webpagina dicteert. Elk element wordt beschouwd als een rechthoekige doos, en deze doos heeft meerdere lagen: inhoud, padding, border en margin.
Hier is een korte uitleg van deze lagen:
- De inhoud: Dit is wat je echt ziet, zoals de tekst, een afbeelding, of een video bijvoorbeeld. De content box is de gebied waar je inhoud zich bevindt en de grootte van deze box kan worden aangepast met breedte- en hoogte-eigenschappen.
- De padding: Dit is de ruimte die zich bevindt tussen de inhoud van je box en zijn border. Padding is transparant.
- De border: Dit bepaalt de grens van een element. Het bevindt zich rondom de padding en inhoud.
- De margin: Dit is de ruimte rondom het element. Het schept ruimte tussen het element en andere HTML-elementen. Net als padding is margin ook transparant.
Het boxmodel speelt een belangrijke rol bij de opmaak en positionering van elementen. Hoe groter de padding, border en margin, hoe meer ruimte het element inneemt op de pagina.
Om de boxmodel toe te passen op een HTML-element, gebruik je CSS-eigenschappen:
```
div {
width: 300px;
padding: 10px;
border: 5px solid black;
margin: 20px;
}
```
De bovenstaande code past de boxmodel toe op een `
