Pixele na em
Przelicz px na em używając font-size elementu rodzica. em jest względem bezpośredniego rodzica — przydatne, gdy padding przycisku ma skalować się z tekstem etykiety albo wcięcie listy pod lokalny body. Wzór: em = px ÷ parentFontSizePx.
Pixele
Rozmiar fontu rodzica (px)
Wynik
1em
Jak przeliczyć px na em
1. Ustal font-size rodzica w px (np. 18 px).
2. Wpisz wartość px do konwersji (np. 9 px letter-spacing).
3. Odczytaj em (9 ÷ 18 = 0,5 em).
4. Zastosuj w CSS na elemencie potomnym w kontekście tego rodzica.
Przykłady px → em
Padding przycisku
Rodzic 16 px; padding pionowy 8 px → 0,5 em. Skaluje się, gdy rodzic ma 18 px na dużych ekranach.
Zagnieżdżony nagłówek
Sekcja 20 px; projekt podnagłówka 24 px → 1,2 em względem sekcji, nie root.
Wyrównanie ikony
Ikona inline 14 px przy linii 16 px → box 0,875 em wyrównany do metryk tekstu.
Kiedy przeliczać px na em
• Gdy wnętrze komponentu ma skalować się ze zmianą lokalnego font-size.
• Gdy stylujesz rich text z nagłówkami w kontenerach o różnej wielkości czcionki.
• Gdy legacy CSS używał em i mapujesz nowe px w ten sam system.
Kiedy lepiej wybrać coś innego
• Gdy chcesz spójne odstępy w całej witrynie — prostsze rem od root.
• Gdy głębokie zagnieżdżenie powoduje kumulację em — preferuj rem dla marginesów.
• Gdy potrzebujesz rozmiaru względem viewport — użyj vw/vh.
Pułapki kumulacji em
Głębokie menu z font-size: 0.9em na każdym poziomie niespodziewanie kurczy tekst. Preferuj rem dla font-size na poziomach strukturalnych; em dla lokalnego paddingu przy jednym rodzicu. Udokumentuj założenia w tokenach designu.
em w media queries?
Media query w em historycznie odnosiły się do domyślnej przeglądarki (16 px), nie rodzica komponentu. Współczesny responsive często używa rem lub px w breakpointach — wiedz, którego kontekstu dotyczy stylesheet.
Najczęstsze pytania
Czym różni się em od rem?
em odnosi się do font-size rodzica; rem tylko do root (html).
Dlaczego zagnieżdżone em się kumulują?
Każdy poziom mnoży: 1,2 em w rodzicu 1,2 em daje 1,44 × root przy łańcuchu font-size.
Wzór?
em = px ÷ parentFontSizePx. Zawsze używaj obliczonego font-size bezpośredniego rodzica.
Padding w em?
Tak — padding/margin w em skalują się z font-size elementu (dla margin/padding spec używa font-size elementu).
Skąd pochodzi em?
Tradycyjnie „szerokość wielkiego M” w druku; w CSS definiowane względem font-size.
Czy dane trafiają na serwer?
Nie. Konwersja działa lokalnie.