Ga naar hoofdinhoud

Ruimte rond elementen

Wat ga je leren?​

Ruimte rond een element regel je met padding en margin. Je groepeert hier ook elementen in een <div> en geeft die een achtergrondkleur.

Theorie​

Elk HTML-element heeft een onzichtbare "doos" om zich heen. Je kunt op twee plekken ruimte toevoegen:

  • padding — ruimte binnen het element, tussen de inhoud en de rand.
  • margin — ruimte buiten het element, afstand tot andere elementen.
┌─────────────────────────────┐
│         margin              │
│  ┌───────────────────────┐  │
│  │       padding         │  │
│  │  ┌─────────────────┐  │  │
│  │  │     inhoud      │  │  │
│  │  └─────────────────┘  │  │
│  └───────────────────────┘  │
└─────────────────────────────┘

Met background-color geef je het element een achtergrondkleur — zo zie je goed waar het element begint en eindigt.

De <div> tag​

Een <div> is een onzichtbaar blok waarmee je andere elementen groepeert. Op zichzelf doet hij niets, maar via CSS kun je hem ruimte en kleur geven om groepen elementen visueel te scheiden.

<div>
  <h2>Een titel</h2>
  <p>Wat tekst eronder.</p>
</div>

Predict​

Wat denk je dat er verandert als je padding: 20px verwijdert uit de CSS hieronder?

Klik hier voor het antwoord

De tekst raakt direct de rand van de gekleurde achtergrond. Zonder padding is er geen ademruimte tussen de inhoud en de rand van het blok.

Probeer en onderzoek​

Probeer eerst zelf, klap dan het antwoord uit.
  1. Vergroot de padding naar 40px. Wat gebeurt er?
    AntwoordDe lichtblauwe blokken worden groter en de tekst komt verder van de rand af. Padding is ruimte binnen het blok, dus de achtergrondkleur loopt mee.
  2. Vergroot de margin naar 40px. Wat verandert er?
    AntwoordDe blokken komen verder van de rand van het voorbeeld en van elkaar af. Tussen de blokken zit 40 pixels, geen 80: twee marges boven elkaar smelten samen tot de grootste.
  3. Zet padding: 0. Wat zie je?
    AntwoordDe tekst zit tegen de linker- en de bovenrand van het lichtblauwe vak. Zonder padding is er geen ruimte meer tussen de rand en de inhoud.
  4. Vervang margin: 20px door margin: 0. Wat gebeurt er tussen de blokken?
    AntwoordEr zit niets meer tussen: de twee blokken vormen samen één lichtblauw vlak. Langs de rand van het voorbeeld blijft een smalle witte strook over, de standaardmarge van de pagina zelf.
Editor laden...

Modify​

Opdracht: Geef de blokken een lichtgele achtergrond en vergroot de padding zodat er meer ademruimte is.

Editor laden...
Tip

Pas background-color aan en zet padding op bijvoorbeeld 30px.

Antwoord
div {
  background-color: lightyellow;
  padding: 30px;
  margin: 20px;
}

Make​

Opdracht: Bouw twee "kaartjes" onder elkaar. Elk kaartje is een <div> met een kop en een paragraaf. Gebruik background-color, padding en margin om ze er rustig en goed verdeeld uit te laten zien.

Editor laden...
Tip

Eén div-regel in CSS werkt al voor allebei de kaartjes. Geef ze dezelfde stijl via de div-selector.

Antwoord
<div>
  <h2>Eerste kaartje</h2>
  <p>Met wat tekst erin.</p>
</div>
<div>
  <h2>Tweede kaartje</h2>
  <p>Met ook wat tekst erin.</p>
</div>
div {
  background-color: #e6f4ea;
  padding: 25px;
  margin: 15px;
}

Er gaat iets mis​

margin en padding door elkaar halen

Een veelgemaakte fout is margin gebruiken als je padding bedoelt, of andersom. Onthoud:

  • Wil je ruimte binnen het element (tussen inhoud en rand)? → padding
  • Wil je ruimte buiten het element (afstand tot andere elementen)? → margin

In Randen en afmetingen leer je hoe je deze blokken ook een rand en een vaste breedte geeft.