Jednostka em w CSS to zwykle 16 pikseli. Sprawdź zastosowania

Ewa Klimowicz

21 grudnia, 2023

3 min

• Praca w IT
• Artykuły

Ostatnia aktualizacja 21 grudnia, 2023

CSS służy do opisu wyglądu i formatowania stron internetowych i wzbogaca kod HTML o dodatkowe style. W CSS-ie stosuje się różne jednostki miary, a wśród nich szczególnie interesująca jest jednostka em. Pozwala ona na tworzenie elastycznych i dostępnych projektów, adaptujących się do preferencji użytkownika oraz różnych urządzeń. W poniższym tekście przyjrzymy się bliżej jednostce em, jej zastosowaniom i wpływowi na responsywność stron.

• Jednostka em w CSS jest elastyczna i adaptuje rozmiary elementów względem rozmiaru fontu, co jest kluczowe dla tworzenia responsywnych i dostępnych stron internetowych.
• Używanie em pozwala na łatwe skalowanie tekstu, marginesów, paddingów i innych elementów, zapewniając lepszą czytelność i spójność na różnych urządzeniach.
• Wprowadza ona nowy poziom dostosowania i harmonii w web designie, umożliwiając tworzenie stron, które dynamicznie reagują na preferencje użytkownika i wymiary ekranu.

Co to jest em w CSS?

Jednostka em w CSS odnosi się do rozmiaru fontu w elemencie. Jeśli dla elementu nie określono rozmiaru fontu, em bazuje na rozmiarze domyślnym przeglądarki, zwykle jest to 16 pikseli.

Zastosowanie jednostki em

Skalowanie tekstu w poniższym przykładzie, to 150% rozmiaru fontu macierzystego.

p {
  font-size: 1.5em;
}

Marginesy i padding wynoszą 2 razy rozmiar fontu w elemencie.

div {
  margin: 2em;
}

W tym fragmencie kodu CSS, dla wszystkich elementów <div> na stronie ustawiono margines (zarówno górny, dolny, lewy, jak i prawy) równy 2 em. Wartość 2 em oznacza, że marginesy będą dwukrotnie większe niż rozmiar czcionki przypisany do tego elementu <div>. Jeśli na przykład rozmiar czcionki dla <div> wynosi 16 pikseli, to marginesy zostaną ustawione na 32 piksele. Użycie jednostki em pozwala na zachowanie proporcjonalności marginesów względem rozmiaru tekstu, co jest szczególnie użyteczne w responsywnym designie.

Media queries

@media screen and (max-width: 40em) {
  body {
    background-color: lightblue;
  }
}

Powyższy kod CSS stosuje regułę media query, która zmienia kolor tła elementu body na jasnoniebieski (lightblue), ale tylko wtedy, gdy szerokość ekranu jest mniejsza lub równa 40 jednostkom em.

Dalsza część tekstu znajduje się pod materiałem wideo:

Dlaczego warto używać jednostek em w CSS?

• Elastyczność: Jednostki em są elastyczne i pozwalają na łatwe skalowanie elementów w zależności od rozmiaru czcionki, co jest szczególnie ważne w responsywnym designie.

• Dostępność: Używając em, strona staje się bardziej dostępna dla użytkowników, którzy potrzebują większych czcionek z powodów wzrokowych.

• Spójność: Utrzymując spójność w rozmiarach elementów względem rozmiaru czcionki, strona wygląda bardziej harmonijnie na różnych urządzeniach.

Czytaj także:

Stwórz margines wewnętrzny w CSS. Prosta instrukcja

Dobry font na stronę internetową – jak wybrać?