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

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

.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.