1. Wpisz wartość
Wpisz liczbę w polu wejściowym. Możesz użyć kropki lub przecinka jako separatora dziesiętnego.
Przelicz em na px – konwerter CSS z ustawianym font-size
Ustaw font-size rodzica i natychmiast sprawdź, ile pikseli ma 1,5 em lub 0,875 em – bez kalkulatora i ręcznych przeliczeń.
REKLAMA
REKLAMA
Loading tool editor...
Czym jest em i kiedy warto przeliczać na piksele?
Jednostka em w CSS odnosi się do wielkości czcionki elementu nadrzędnego. Jeśli rodzic ma font-size 16 px, to 1 em = 16 px, 1,5 em = 24 px.
W odróżnieniu od rem, wartość em zmienia się w zależności od kontekstu. Jeśli nagłówek ma font-size 24 px, to padding 0,5 em na tym nagłówku = 12 px, a nie 8 px.
Jednostka em jest przydatna tam, gdzie wymiar ma skalować się proporcjonalnie do tekstu – np. padding wokół przycisku, odstępy w typografii, line-height.
Problem z em pojawia się przy zagnieżdżaniu elementów – efekt kumulacji (1,2 em × 1,2 em × 1,2 em…) może prowadzić do nieoczekiwanych rozmiarów. Dlatego dla font-size lepiej używać rem.
Jak korzystać z konwertera?
2. Odczytaj wynik
Wynik konwersji pojawi się natychmiast w polu obok – bez klikania żadnego przycisku.3. Skopiuj lub zmień kierunek
Kliknij Kopiuj wynik lub użyj przycisku Zmień kolejność, aby przeliczać w drugą stronę.
Kiedy przydaje się ten konwerter?
Typografia
Line-height 1,5 em = 150% rozmiaru czcionki rodzica.Przyciski
Padding w em skaluje się z rozmiarem tekstu przycisku.Komponenty
Wymiary proporcjonalne do tekstu w komponentach UI.CSS media queries
Breakpointy w em są odporne na zmianę bazowego font-size.
Co wyróżnia nasz konwerter?
Pełna prywatność
Wszystkie obliczenia odbywają się lokalnie w przeglądarce. Żadne dane nie są wysyłane na serwer.Wynik w czasie rzeczywistym
Wynik aktualizuje się natychmiast podczas wpisywania – bez konieczności klikania.Obustronna konwersja
Przycisk Zmień kolejność pozwala przeliczać w obu kierunkach jednym kliknięciem.Tabela popularnych wartości
Gotowa tabela z najczęściej przeliczanymi wartościami i opisami kontekstowymi.
Jak działa konwersja em na px?
Jednostka em w CSS jest relatywna i odnosi się do rozmiaru czcionki elementu nadrzędnego (rodzica). Jeśli element nadrzędny ma rozmiar czcionki 16 px (domyślna wartość przeglądarki), to 1 em = 16 px. Aby przeliczyć em na piksele, wystarczy pomnożyć wartość em przez rozmiar czcionki rodzica.
Na przykład jeśli rodzic ma font-size 20 px, to 1,5 em = 30 px. Kluczowa różnica między em a rem polega na tym, że em odnosi się do rodzica, a rem zawsze do elementu głównego (html). Oznacza to, że wartości em mogą się kumulować przy zagnieżdżaniu elementów.
Jednostka em jest szczególnie przydatna do definiowania paddingów, marginów i odstępów, które powinny być proporcjonalne do rozmiaru tekstu w danym kontekście. Konwerter pozwala ustawić dowolną wartość font-size rodzica.
Praktyczne wskazówki
- Używaj em do paddingów i marginów, które mają być proporcjonalne do tekstu.
- Używaj rem do font-size – unikniesz efektu kumulacji.
- Line-height: 1,5 em to standard dla tekstu czytelnego (WCAG).
- Media queries: em jest bardziej niezawodne niż px (respektuje zoom przeglądarki).
REKLAMA
em vs px – porównanie
| Cecha | em | px |
|---|---|---|
| Typ | Relatywna (rodzic) | Absolutna |
| Odniesienie | font-size rodzica | Stała wartość |
| Zagnieżdżanie | Kumuluje się | Brak efektu |
| Zastosowanie | Padding, margin, line-height | Border, shadow, stałe wymiary |
| Media queries | Respektuje zoom | Nie respektuje zoom |
em
- Typ
Relatywna (rodzic) - Odniesienie
font-size rodzica - Zagnieżdżanie
Kumuluje się - Zastosowanie
Padding, margin, line-height - Media queries
Respektuje zoom
px
- Typ
Absolutna - Odniesienie
Stała wartość - Zagnieżdżanie
Brak efektu - Zastosowanie
Border, shadow, stałe wymiary - Media queries
Nie respektuje zoom
Konwertuj inne jednostki do Piksele
Sprawdź konwertery innych jednostek
Najczęściej zadawane pytania
Ile pikseli ma 1 em?
Zależy od font-size rodzica. Przy domyślnym 16 px: 1 em = 16 px. Przy rodzicu 20 px: 1 em = 20 px. Dlatego em jest jednostką relatywną – jej wartość w pikselach zmienia się zależnie od kontekstu elementu nadrzędnego.
Jaka jest różnica między em a rem?
Em odnosi się do font-size bezpośredniego rodzica i zmienia się w zależności od kontekstu zagnieżdżenia. Rem zawsze odnosi się do font-size elementu <code><html></code> – jest stałe na całej stronie. Do font-size używaj rem, do paddingu i line-height możesz używać em lub rem.
Kiedy używać em zamiast rem?
Em sprawdza się przy padding i margin, które powinny skalować się proporcjonalnie do rozmiaru tekstu konkretnego elementu – np. padding przycisku powinien rosnąć razem z etykietą. Rem jest lepszy do font-size, bo nie kumuluje się przy zagnieżdżaniu elementów.
Co to jest efekt kumulacji em?
Jeśli zagnieżdżone elementy używają font-size w em, każdy kolejny poziom mnoży wartość przez współczynnik rodzica. Trzy poziomy po 1,2 em dają 1,2 × 1,2 × 1,2 = 1,728-krotność oryginalnego rozmiaru. To główny powód, dla którego należy używać rem do font-size.
Czy em jest lepsze od px w CSS?
Em jest elastyczniejsze – padding w em skaluje się automatycznie przy zmianie font-size elementu. Piksele są przewidywalne i niezależne od kontekstu. W praktyce stosuje się mieszankę: rem do font-size, em do paddingów i line-height, px do borderów i cieni.
Jaki line-height ustawiać w em?
1,4–1,6 em (lub bezjednostkowe 1.4–1.6) to zalecany zakres dla tekstu ciągłego. WCAG 1.4.8 zaleca minimum 1,5. Bezjednostkowy line-height (np. 1.5) jest preferowany – dziedziczy się poprawnie w zagnieżdżonych elementach i unika problemów z kumulacją.
Jak em działa w media queries?
W media queries em odnosi się do bazowego font-size przeglądarki (zwykle 16 px), nie do elementu nadrzędnego. Breakpoint <code>@media (min-width: 48em)</code> to 768 px. Em w media queries respektuje zoom przeglądarki – layout lepiej reaguje na preferencje użytkownika.
Ile em ma domyślny tekst strony?
Domyślny font-size przeglądarki to 16 px = 1 em = 1 rem. Jeśli użytkownik zmieni rozmiar czcionki w ustawieniach na 20 px, to 1 em = 20 px na całej stronie – interfejsy oparte na em i rem skalują się automatycznie, co poprawia dostępność (WCAG).
Pomóż nam ulepszyć narzędzia
Masz pomysł na nową funkcję, znalazłeś błąd lub chcesz zaproponować inne narzędzie? Napisz do nas – odpowiadamy w ciągu 24 godzin.