Erläuterung der Einheit 'em' in CSS

Die Einheit 'em' ist eine dimensionale Maßeinheit in Cascading Style Sheets (CSS). Sie stellt einen relativen Wert dar, der sich auf die Schriftgröße des Elements bezieht, zu dem sie angewendet wird. Dies unterscheidet sie von absoluten Einheiten wie Pixeln.

Bei der Verwendung von 'em' wird die Schriftgröße des aktuellen Elements als Basis genommen. Wenn keine spezifische Schriftgröße für dieses Element festgelegt wurde, erbt es die Schriftgröße aus dem nächstübergeordneten Element.

Anwendungsbeispiel für 'em'

Angenommen, wir haben ein Element mit der Klasse 'text', für das eine Schriftgröße von 20 Pixeln festgelegt wurde.

.text {
  font-size: 20px;
}

Wenn wir nun innerhalb dieses Elements ein anderes Element mit 'em' als Maßeinheit für die Schriftgröße haben, würde '1em' diese 20 Pixel darstellen.

.text span {
  font-size: 2em;
}

In diesem Fall hätte der Span-Tag eine Schriftgröße von 40 Pixeln, da '2em' das Doppelte der Schriftgröße seines Elternelements ist.

Beste Praktiken und weitere Einblicke

Die Verwendung der Einheit 'em' in CSS ermöglicht eine größere Flexibilität und verbesserte Skalierbarkeit von Webseiten. Sie ist insbesondere nützlich, um responsives Design zu erstellen, das sich an unterschiedliche Bildschirmgrößen und Anzeigevorrichtungen anpasst.

Es ist jedoch zu beachten, dass das Verschachteln von Elementen, die 'em' als Maßeinheit verwenden, schnell zu unerwarteten Ergebnissen führen kann, da die Schriftgröße verschachtelter Elemente kumulativ multipliziert wird. Es ist daher ratsam, die Verwendung von 'em' bewusst zu planen und bei Bedarf auf alternative relative Einheiten wie 'rem', die sich auf die Grundschriftgröße des Dokuments beziehen, zurückzugreifen.