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 het zelf.

Editor laden...

Investigate

Experimenteer:

• Verander font-size van h1 naar 2em. Verschilt dat van 2rem, en waarom wel of niet?
• Zet de padding van de knop op 8px 16px. Wat gebeurt er nu als je de font-size van die knop verandert?
• Geef .balk een width van 200px in plaats van 50%. Maak het voorbeeld daarna smaller met de knoppen erboven; welke van de twee blijft meeschalen?
• Zet font-size van html op 24px (voeg een html { font-size: 24px; }-regel toe). Wat schaalt mee en wat niet? Dat is wat er gebeurt als een bezoeker zijn standaard lettergrootte groter zet.

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.