CSS Academy · Lektion

Relative Einheiten: em und rem

Legen Sie die Größe von Elementen relativ zur Schriftgröße des übergeordneten Elements oder der Root fest, indem Sie em- und rem-Einheiten verwenden.

Relative Einheiten: em und rem ist eine kostenlose CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des CSS Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.

Was sind relative Einheiten?

Relative Einheiten werden anhand eines anderen Maßes skaliert – normalerweise anhand der Schriftgröße eines Elements oder des Root-Elements. Sie ermöglichen skalierbare, responsive Designs, die Benutzereinstellungen berücksichtigen.

em — Relativ zur Schriftgröße des übergeordneten Elements

em bezieht sich auf die Schriftgröße des aktuellen Elements (bei der Eigenschaft font-size selbst) oder auf das übergeordnete Element (bei anderen Eigenschaften). Dadurch kann es zu einer schrittweisen Verstärkung kommen.

<div class="parent">
    Parent (20px)
    <div class="child">
      Child (1.5em = 30px)
      <div class="grandchild">Grandchild (1.5em = 45px!)</div>
    </div>
  </div>

em für Abstände

Wenn em für padding, margin oder border-radius verwendet wird, bezieht es sich auf die eigene Schriftgröße des Elements. So entstehen Komponenten, die sich proportional skalieren.

<button class="button">Padded Button</button>

rem — Relativ zur Root-Schriftgröße

rem (root em) bezieht sich auf die Schriftgröße des Root-Elements (html). Die Einheit wird nie schrittweise verstärkt und ist auf der gesamten Seite vorhersehbar.

<h1>Heading (2.5rem = 40px)</h1>
  <p>Paragraph text (1rem = 16px)</p>
  <small>Small print (0.75rem = 12px)</small>

rem und Barrierefreiheit

Wenn der Benutzer die Basisschriftgröße des Browsers erhöht (z. B. für bessere Lesbarkeit von 16px auf 20px), werden rem-Einheiten entsprechend skaliert. Feste px-Einheiten tun dies nicht. Deshalb wird rem für Typografie dringend empfohlen.

html font-size in Prozent

Legen Sie die Root-Schriftgröße als Prozentsatz fest, damit die Browsereinstellungen des Benutzers berücksichtigt werden:

<p>Root font-size respects the browser/user default (100%).</p>

em oder rem wählen

Praktischer Leitfaden:

Verwenden Sie rem für Schriftgrößen, Abstandsvariablen und Maße im Layout
Verwenden Sie em für Abstände innerhalb von Komponenten, die sich mit der Schriftgröße der Komponente skalieren sollen (z. B. padding eines Buttons)

em in Media Queries

Media Queries in em reagieren auf Änderungen der Browserschriftgröße. Ein Breakpoint von 48em entspricht bei den Standardeinstellungen 768px, passt sich aber an, wenn der Benutzer die Basisschriftgröße geändert hat.

<div class="layout">
    <div>Column A</div>
    <div>Column B</div>
  </div>

em berechnen

Die Formel lautet: desired px / parent px = em value. Wenn das übergeordnete Element 16px groß ist und Sie Text mit 24px wünschen: 24/16 = 1.5em.

<h2>Heading (24px via 1.5rem)</h2>
  <p>Paragraph (18px via 1.125rem)</p>

Das Problem mit der em-Verstärkung

Durch das Verschachteln von Elementen mit em-Schriftgrößen wird die Schriftgröße multiplikativ verstärkt. Deshalb wird rem für die Schriftgröße bevorzugt – die Einheit bezieht sich immer auf das Root-Element und verhindert diese Verstärkung.

ch — Zeichenbreite

Die Einheit ch entspricht der Breite des Zeichens „0“ in der aktuellen Schriftart. Sie eignet sich, um Textcontainer auf gut lesbare Zeilenlängen zu begrenzen:

<p class="article-body">This paragraph is constrained to about 70 characters per line using the ch unit, which keeps text at a comfortable, readable line length regardless of font size.</p>

Kurzer Test

Ein Button hat font-size: 1.25rem und padding: 0.5em. Wenn die Root-Schriftgröße 16px beträgt, wie groß ist das Padding in Pixeln?

Zusammenfassung

em wird relativ zur Schriftgröße des aktuellen Elements skaliert (bei font-size selbst relativ zum übergeordneten Element) und kann schrittweise verstärkt werden. rem wird immer relativ zum Root-Element skaliert und nie schrittweise verstärkt. Verwenden Sie rem für Typografie und globale Abstände, em für proportionale Abstände innerhalb von Komponenten.

Häufig gestellte Fragen

Ist die Lektion „Relative Einheiten: em und rem“ kostenlos?

Ja — der vollständige Text von „Relative Einheiten: em und rem“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des CSS Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Relative Einheiten: em und rem“?

Legen Sie die Größe von Elementen relativ zur Schriftgröße des übergeordneten Elements oder der Root fest, indem Sie em- und rem-Einheiten verwenden. Du übst CSS Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um CSS Academy zu starten?

Keine Vorkenntnisse erforderlich. CSS Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.

Wie lange dauert die Lektion „Relative Einheiten: em und rem“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser CSS Academy-Lektion Code schreiben und ausführen?

Ja. Jede CSS Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu CSS Academy