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ń.
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.
REKLAMA
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 |
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.
REKLAMA
Sprawdź inne narzędzia
Edytor zdjęć
Zmień rozmiar, wykadruj i przekonwertuj zdjęcie. Gotowe formaty, okrągłe avatary, eksport JPG/PNG/WebP.
Licznik meta title i description
Sprawdź długość tytułu i opisu strony w pikselach. Podgląd wyniku w Google na żywo.
PNG na JPG
Zamień pliki PNG na JPG. Konwersja w przeglądarce, bez limitu plików i rejestracji.
Generator favicon
Stwórz favicon.ico dla swojej strony z jednego obrazu. Bez logowania i rejestracji.
Generator palet kolorów
Wygeneruj 9 palet z jednego koloru: monochromatyczną, komplementarną, triadyczną i inne. Kody HEX.
Tester kontrastu kolorów
Sprawdź kontrast tekstu i tła według WCAG 2.1 AA i AAA. Automatyczna korekta kolorów.
Generator kodów QR
Stwórz kod QR do strony, wizytówki vCard lub druku. Eksport PNG i SVG, bez rejestracji.
Licznik słów i znaków
Policz słowa, znaki, zdania i czas czytania. Zmień wielkość liter i sformatuj tekst jednym kliknięciem.