Middle+

Wat is het verschil tussen rem en em?

sobes.tech AI

Antwoord van AI

rem en em zijn relatieve eenheden in CSS, die worden gebruikt om afmetingen te bepalen, maar verschillen in de referentiebasis.

em — een relatieve eenheid gebaseerd op de lettergrootte van het bovenliggende element. Bijvoorbeeld, als de lettergrootte van de ouder is: 16px, dan is 1em = 16px. Als in een kindelement de lettergrootte is: 1.5em, dan is de grootte 24px.
rem — een relatieve eenheid gebaseerd op de lettergrootte van het root-element (meestal <html>). Bijvoorbeeld, als <html> een lettergrootte heeft van: 16px, dan is 1rem altijd gelijk aan 16px, ongeacht de nesting.

Belangrijkste verschil:

em hangt af van de context (het ouderelement), wat kan leiden tot cascade-achtige vermenigvuldiging van groottes bij nesting.
rem is altijd vast ten opzichte van de root, wat het beheer van groottes vereenvoudigt en voorspelbaarder maakt.

Voorbeeld:

html {
  font-size: 16px;
}

.parent {
  font-size: 20px; /* 1em = 20px binnen .parent */
}

.child-em {
  font-size: 1.5em; /* 1.5 * 20px = 30px */
}

.child-rem {
  font-size: 1.5rem; /* 1.5 * 16px = 24px */
}

Gebruik rem voor globale groottes om onverwachte veranderingen te voorkomen, en em wanneer je wilt schalen ten opzichte van de lokale context.

Vorige Volgende