Boxen en afstanden · Code met Martin

Ontdek het grootste geheim van CSS: alles op een pagina is een box. En leer ze te verplaatsen.

Ik laat je zien: alles is een box

Hier is het grootste geheim van webdesign: alles op een pagina is een rechthoekige box. Een kop, een alinea, een afbeelding, een menu – alles. Als je dat leert zien, valt alle CSS op zijn plek.

Elke box heeft drie soorten ruimte eromheen:

        margin (outer space)
      ┌─────────────────────────┐
      │  border (frame)         │
      │  ┌───────────────────┐  │
      │  │ padding (cushion) │  │
      │  │  ┌─────────────┐  │  │
      │  │  │   CONTENT   │  │  │
      │  │  └─────────────┘  │  │
      │  └───────────────────┘  │
      └─────────────────────────┘

padding – het kussen: ruimte tussen de inhoud en de rand (binnen de box)
border – het kader van de box
margin – ruimte tussen de box en zijn buren (buiten de box)

.card {
  padding: 16px;        /* cushion on all sides */
  border: 2px solid gray;
  margin: 20px 0;       /* 20px top and bottom, 0 on the sides */
  border-radius: 12px;
}

Ik laat je zien: een pagina zoals de professionals bouwen

Dit heb je op echte websites gezien – de inhoud wordt niet over het hele brede scherm uitgerekt, maar blijft in een comfortabele kolom in het midden. Drie regels CSS doen dat:

main {
  max-width: 700px;   /* content will never be wider than 700px */
  margin: 0 auto;     /* auto on the sides = center it */
  padding: 0 16px;     /* on mobile, text won't be glued to the edge */
}

margin: 0 auto is een magische formule: nul boven en onder, “automatisch gelijk” aan de zijkanten – dus gecentreerd. Bijna elke website ter wereld gebruikt deze regel.

En laten we afbeeldingen temmen, zodat ze nooit buiten de pagina vallen:

img {
  max-width: 100%;      /* never wider than the column */
  height: auto;         /* height adjusts automatically, so the photo doesn't squish */
  border-radius: 12px;  /* rounded corners suit every photo */
}

Nu jij 💪

Deze opdracht is voor elk project hetzelfde – het is een universele outfit voor elke website:

Centreer je inhoud: de regel max-width + margin: 0 auto op main.
Tem je afbeeldingen met de img-regel uit het voorbeeld.
Verbeter je badge uit de vorige les: voeg margin toe zodat hij kan ademen.
Laat de pagina ademen: voeg body { line-height: 1.6; } toe – regels tekst spreiden zich mooi uit.

Volledige oplossing (werkt voor elk project)

Voeg dit toe aan style.css:

body {
  line-height: 1.6;
}

main {
  max-width: 700px;
  margin: 0 auto;
  padding: 0 16px;
}

img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

En aan je badge (die van jou heet misschien .news, .favorite, .tip of .win), voeg deze regel toe:

  margin: 20px 0;

💡

Probeer de boxen zichtbaar te maken! Voeg deze regel even toe aan je CSS: * { border: 1px solid red; } – het sterretje betekent “absoluut alles”. Plots zie je elke box op de pagina. Verwijder het daarna weer, maar onthoud dat beeld: zo ziet de browser je pagina.

✅

Controleer jezelf: Je inhoud staat in een comfortabele gecentreerde kolom, foto’s hebben afgeronde hoeken en lopen nergens over, tekst is makkelijk te lezen. Maak je browservenster kleiner – de inhoud past zich aan. Je website ziet er ineens een klasse beter uit.

Wat neem je mee uit deze les

Alles op een pagina is een box met padding (binnen), border (kader) en margin (buiten).
max-width + margin: 0 auto = een gecentreerde inhoudskolom, net als echte websites.
img { max-width: 100%; } – foto’s lopen nooit over.