PX2REM .COM
Pollo AI

All in one AI tool.
em zu px

Sehen Sie, wie em-Einheiten in verschachtelten Elementen zusammenwirken. Geben Sie einen em-Wert und eine Basis-Schriftgröße ein, um den Kaskadeneffekt auf jeder Verschachtelungsebene zu visualisieren.

Anleitung 📢 Master the core languages: JavaScript, HTML, CSS, and Python
Basis-Schriftgröße:
Verschachtelungsebenen:
Geben Sie einen em-Wert ein, um zu sehen, wie er sich auf jeder Verschachtelungsebene auswirkt

EM Verschachtelungssequenz (16px × 2em)

VerschachtelungsebeneBerechneter WertFormel
132px16 × 21
264px16 × 22
3128px16 × 23
4256px16 × 24
5512px16 × 25
61024px16 × 26
72048px16 × 27
84096px16 × 28
Teilen:

EM zu PX Rechner - CSS EM-Verschachtelungseffekte visualisieren

Möchten Sie verstehen, wie em-Einheiten in verschachtelten HTML-Elementen zusammenwirken? Sie haben das richtige Tool gefunden.

Hier ist der Deal:

Im Gegensatz zu rem (das immer relativ zur Wurzel ist) ist em relativ zur Schriftgröße des Elternelements. Dies erzeugt einen kaskadierenden Multiplikationseffekt, der schnell außer Kontrolle geraten kann.

So verwenden Sie diesen EM-Verschachtelungsrechner

Die Verwendung dieses Tools ist einfach:

  1. Wählen Sie Ihre Basis-Schriftgröße - Dies ist die Schriftgröße des Wurzelelements (Standard 16px)
  2. Geben Sie Ihren em-Wert ein - Der em-Multiplikator in Ihrem CSS
  3. Wählen Sie Verschachtelungsebenen - Wie tief Sie visualisieren möchten
  4. Sehen Sie die Kaskade - Beobachten Sie, wie Werte auf jeder Ebene zusammenwirken

Warum EM zusammenwirkt - Das Verschachtelungsproblem

Sie fragen sich vielleicht:

Warum erzeugt font-size: 2em so unterschiedliche Ergebnisse je nachdem, wo es angewendet wird?

Das ist verrückt:

Mit einer 16px-Basis und font-size: 2em:

  • Ebene 1: 16px × 2 = 32px
  • Ebene 2: 32px × 2 = 64px
  • Ebene 3: 64px × 2 = 128px
  • Ebene 4: 128px × 2 = 256px

Nach nur 4 Ebenen ist Ihre Schrift 16-mal größer als die Basis!

Die EM-Zusammensetzungsformel

Die Formel für em auf jeder Verschachtelungsebene:

px = Basis-Schriftgröße × em^Ebene

Zum Beispiel mit 16px Basis und 1.5em:

  • Ebene 1: 16 × 1.5¹ = 24px
  • Ebene 2: 16 × 1.5² = 36px
  • Ebene 3: 16 × 1.5³ = 54px
  • Ebene 4: 16 × 1.5⁴ = 81px

Batch-Konvertierung

Viele em-Werte auf einmal umrechnen? Nutzen Sie die Batch-Konvertierung.

  1. Fügen Sie CSS/Text mit em-Werten ein (z. B. 1.5em).
  2. Wählen Sie die Basis-Schriftgröße.
  3. Kopieren Sie die Ausgabe mit allen in px umgerechneten em-Werten.

Hinweis: Die Batch-Konvertierung behandelt em als relativ zur gewählten Basis-Schriftgröße. Für verschachtelte Kompositionen nutzen Sie die obige Verschachtelungstabelle.

Häufig gestellte Fragen

Warum wird mein Text in verschachtelten Elementen immer größer?

Wenn Sie em-Einheiten für die Schriftgröße verwenden, multipliziert jede Verschachtelungsebene den Wert. Wechseln Sie zu rem-Einheiten für konsistente Größen.

Kann em trotz der Zusammensetzung nützlich sein?

Absolut. Em ist großartig für:

  • Padding/Margin, das mit der Textgröße skaliert
  • Komponenteninterne Abstände, die zusammen skalieren sollten
  • Icongrößen, die zum benachbarten Text passen