Rem, em – jednostki miary w css

Joanna

CSS

Jednostki rem i em w CSS są niezwykle przydatne, jeśli chcesz tworzyć skalowalne, responsywne i dostępne interfejsy. Pomagają w zarządzaniu rozmiarem czcionek, marginesami, paddingiem i wieloma innymi właściwościami, bez konieczności używania sztywnych wartości pikselowych.

Czym są jednostki rem i em?

Obie jednostki są jednostkami względnymi, co oznacza, że ich wartości zależą od innych elementów na stronie.

  • em – odnosi się do rozmiaru czcionki swojego rodzica.
  • rem – odnosi się do rozmiaru czcionki elementu <html>.

Czyli:

  • 1em to 100% wielkości czcionki rodzica.
  • 1rem to 100% wielkości czcionki ustawionej w <html>.

Jak działa em?

Jednostka em jest zależna od elementu nadrzędnego. Spójrzmy na przykład:

html {
  font-size: 16px;
}

.parent {
  font-size: 20px;
}

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

1.5em oznacza 1.5 × rozmiar czcionki rodzica, czyli 1.5 × 20px = 30px.

Problemem em jest efekt zagnieżdżania. Jeśli ustawimy em w kilku poziomach, wartości mogą się nieoczekiwanie mnożyć:

.parent {
  font-size: 2em; /* 2 × 16px = 32px */
}

.child {
  font-size: 1.5em; /* 1.5 × 32px = 48px */
}

Dziecko (.child) ma teraz 48px, ponieważ dziedziczy 32px od .parent i skaluje go o 1.5×.

Kiedy używać em?

  • Do wewnętrznych odstępów (padding, margin)
  • Do ikon i przycisków, które powinny skalować się razem z tekstem
  • W komponentach UI, gdzie elementy powinny być zależne od siebie

Jak działa rem?

Jednostka rem odnosi się zawsze do rozmiaru czcionki w <html> i nie jest zależna od rodzica.

html {
  font-size: 16px;
}

.box {
  font-size: 2rem; /* 2 × 16px = 32px */
}

2rem to zawsze 32px, niezależnie od tego, gdzie .box się znajduje.

Kiedy używać rem?

  • Do głównego rozmiaru czcionki (font-size)
  • Do spójnego skalowania interfejsu w całym projekcie
  • Do globalnych wartości w layoucie (width, padding, margin)