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
* {
  box-sizing: border-box;  /* Best practice */
}

.box {
  width: 200px;          /* Content width */
  height: 150px;
  
  padding: 20px;         /* BINNENIN, count in width */
  border: 2px solid black;
  margin: 30px auto;     /* BUITENOM, not in width */
  
  /* Shorthand: top/bottom right/left */
  padding: 10px 20px;
  margin: 10px 20px 30px 40px;  /* top right bottom left */
}

Diagram

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

Relevante trefwoorden

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