CSS & Styling

Wat is het CSS Box Model?

Het box model beschrijft hoe elementen worden weergegeven in ruimte.

Home/Categorieën/CSS & Styling/Wat is het CSS Box Model?

Box Model componenten

1) Content - de werkelijke inhoud (text, afbeeldingen) 2) Padding - ruimte BINNEN de grens 3) Border - lijn rond padding 4) Margin - ruimte BUITEN de grens

Content Box vs Border Box

content-box (standaard): width = alleen content (exclude padding/border) border-box: width = content + padding + border * { box-sizing: border-box; } is best practice

Code Voorbeelden

CSSBox model visualisatie✏️ Interactief
✏️CODE AANPASSEN
LIVE PREVIEW

Diagram

┌─────────────────────────────────────┐
│ MARGIN          (30px)              │
│ ┌─────────────────────────────────┐ │
│ │ BORDER      (2px)               │ │
│ │ ┌─────────────────────────────┐ │ │
│ │ │ PADDING  (20px)            │ │ │
│ │ │ ┌──────────────────────────┐│ │ │
│ │ │ │ CONTENT (200px width) ││ │ │
│ │ │ └──────────────────────────┘│ │ │
│ │ └─────────────────────────────┘ │ │
│ └─────────────────────────────────┘ │
└─────────────────────────────────────┘

Relevante trefwoorden

box modelpaddingmarginborder
← Terug naar CSS & StylingAlle categorieën →