Jednostki miary w CSS

Słownik kwalifikacji INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych

W CSS jednostki miary określają rozmiary elementów, tekstu, marginesów, odstępów, obramowań i innych właściwości. W pytaniach egzaminacyjnych często pojawiają się skróty jednostek, np. px, em, pt, in.

Najważniejsze jednostki

  • px — piksel CSS, bardzo często używany do określania rozmiarów na ekranie, np. font-size: 16px;
  • em — jednostka względna zależna od rozmiaru czcionki elementu nadrzędnego lub bieżącego kontekstu
  • rem — jednostka względna zależna od rozmiaru czcionki elementu głównego html
  • % — wartość procentowa względem elementu nadrzędnego lub danej właściwości
  • pt — punkt edytorski/typograficzny; często kojarzony z edytorami tekstu i drukiem
  • in — cal, jednostka długości; w CSS 1 cal odpowiada 96 pikselom CSS
  • cm, mm — centymetry i milimetry, używane głównie przy stylach do druku

Jednostka pt

Symbol pt oznacza punkt. Jest to jednostka typograficzna znana z edytorów tekstu, np. przy ustawianiu rozmiaru czcionki 12 pt.

Przykład:

p {
  font-size: 12pt;
}

W kontekście stron internetowych częściej używa się px, em lub rem, ponieważ lepiej sprawdzają się na ekranach i w projektowaniu responsywnym. Jednostka pt może być jednak spotykana przy stylach przeznaczonych do wydruku.

Przykład porównania

h1 {
  font-size: 24px;
}

p {
  font-size: 12pt;
}

.box {
  width: 10em;
}

Warto zapamiętać na egzamin

Jeżeli pytanie brzmi: „Która jednostka CSS jest wyrażona w punktach edytorskich?”, poprawna odpowiedź to pt.