Eenheden in CSS

Wat ga je leren?

Achter elke maat in CSS staat een eenheid. Je ziet hier wat px, rem, em en % van elkaar onderscheidt, en wanneer je welke kiest.

Theorie

In eerdere lessen heb je waarden gebruikt als 16px, 1.2rem en 50%. Tijd om te begrijpen wat die eindjes betekenen.

De vier eenheden

Eenheid	Wat het is	Wanneer gebruiken
px	Pixels — een vaste, absolute grootte	Voor border, kleine vaste spacing
rem	Root em — relatief aan de basisgrootte van de pagina (meestal 16px)	Voor lettergrootte, padding, margin
em	Em — relatief aan de lettergrootte van het huidige element	Soms voor padding binnen een knop
%	Procent — relatief aan de ouder van het element	Voor breedte van layout-blokken

px — vaste pixels

Een pixel is altijd dezelfde grootte. Handig voor zaken die niet mogen meeschalen:

border: 2px solid black;

Nadeel: als een gebruiker de tekst groter zet in zijn browser, blijft 16px altijd 16 pixels. Dat is niet toegankelijk.

rem — meeschalen met de pagina

1rem is de basisgrootte van de pagina (meestal 16px). Gebruik je 2rem, dan is dat dubbel zo groot.

h1 {
  font-size: 2rem;       /* 32px bij standaard */
  margin-bottom: 1.5rem; /* 24px bij standaard */
}

Voordeel: zet een bezoeker zijn standaard lettergrootte groter in de browserinstellingen, dan groeit alles wat in rem staat netjes mee. (Inzoomen met Ctrl en scrollen is iets anders: dat vergroot de hele pagina, px inbegrepen.)

em — relatief aan het element zelf

1em is de lettergrootte van het element zelf. Als een knop font-size: 18px heeft, dan is 1em = 18px op die knop.

button {
  font-size: 1.2rem;
  padding: 0.5em 1em;  /* padding schaalt mee met font-size */
}

% — procent van de ouder

Procenten verwijzen naar de ouder. width: 50% betekent: half zo breed als het omhullende element.

.kaart {
  width: 50%;  /* halve breedte van de ouder */
}

Predict

Wat denk je dat er gebeurt als je font-size: 1.5rem op het paragraaf-element zet en padding: 1em op de knop?

Klik hier voor het antwoord

De paragraaftekst wordt 1,5 keer de basisgrootte (meestal 24px). De padding op de knop is 1em, dus net zo groot als de lettergrootte van de knop zelf — niet die van de paragraaf.

Probeer en onderzoek

Probeer eerst zelf, klap dan het antwoord uit.

1. Verander font-size van h1 naar 2em. Verschilt dat van 2rem, en waarom wel of niet?
   Antwoord

   Je ziet geen verschil: allebei 32 pixels. em rekent met de lettergrootte van de ouder en rem met die van html, en hier zijn die allebei 16 pixels.
2. Zet de padding van de knop op 8px 16px en maak daarna de font-size van de knop groter, bijvoorbeeld 2rem. Wat doet de padding?
   Antwoord

   Die groeit niet mee: de tekst wordt groter, maar de ruimte eromheen blijft 8 en 16 pixels. Met 0.5em 1em groeide de padding wel mee, omdat em uitgaat van de lettergrootte van de knop zelf.
3. Verander bij .balk de width van 50% naar 200px. Kies daarna boven het voorbeeld Telefoon en dan Breed. Schaalt de balk mee?
   Antwoord

   Nee, met 200px is de balk op elke breedte 200 pixels. Met 50% was hij altijd de helft van het voorbeeld, op Breed ruim 500 pixels.
4. Voeg bovenaan de CSS html { font-size: 24px; } toe. Wat schaalt mee en wat niet?
   Antwoord

   Alles in rem of em groeit mee: de kop, de tekst, de knop met zijn padding en de ruimte boven de balk. De balk blijft 40 pixels hoog en de rand van de knop 2 pixels, want die staan in px. Zo gaat het ook als een bezoeker zijn standaard lettergrootte groter zet.

Editor laden...

Modify

Opdracht: Maak de paragraaf groter (1.25rem) en geef de knop een padding van 0.75em boven/onder en 1.5em links/rechts.

Editor laden...

Tip

padding met twee waarden: eerste = boven/onder, tweede = links/rechts.

Antwoord

p {
  font-size: 1.25rem;
}

button {
  font-size: 1.2rem;
  padding: 0.75em 1.5em;
  border: 2px solid black;
}

Make

Opdracht: Ontwerp een visitekaartje van 80% breed met een titel (<h2>, lettergrootte 1.5rem), een paragraaf (1rem) en een knop met padding 0.5em 1em. Geef de hele kaart een border: 2px solid en een padding: 1.5rem.

Editor laden...

Tip

Gebruik een <div class="kaart"> als omhulsel en geef de titel, de tekst en de knop elk een eigen klasse. Mix bewust: px voor de border, rem voor lettergroottes, em voor de knop-padding, % voor de breedte.

Antwoord

<div class="kaart">
  <h2 class="kaart-titel">Mijn kaart</h2>
  <p class="kaart-tekst">Een korte beschrijving.</p>
  <button class="kaart-knop">Meer info</button>
</div>

.kaart {
  width: 80%;
  border: 2px solid black;
  padding: 1.5rem;
}

.kaart-titel {
  font-size: 1.5rem;
}

.kaart-tekst {
  font-size: 1rem;
}

.kaart-knop {
  font-size: 1rem;
  padding: 0.5em 1em;
}

Er gaat iets mis

rem en em door elkaar halen

html { font-size: 16px; }       /* basis */
.kaart { font-size: 2em; }      /* nu 32px */
.kaart-tekst { padding: 1em; }  /* 32px padding, niet 16px */

em is relatief aan het eigen element. Als je em binnen een element met groter font-size gebruikt, schaalt alles mee — soms onverwacht groot. Gebruik rem als je een vaste verhouding tot de pagina wilt, en em alleen als bewuste keuze.