CSS/Wertetypen/Maßangaben/relative Einheiten

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Text-Info

Lesedauer
15min
Schwierigkeitsgrad
leicht
Vorausgesetztes Wissen
Längenangaben in CSS


Dieser Artikel beschreibt die relativen Längeneinheiten em, rem, ex und ch, die auf der Schriftgröße des Elements basieren.

em[Bearbeiten]

Dieser Artikel behandelt die CSS-Maßeinheit em. Für das gleichnamige HTML-Element zur Textauszeichnung siehe HTML/Textauszeichnung/em.


Das em ist eine relative Längeneinheit, es repräsentiert die vom Browser berechnete Schriftgröße des Elements; dabei wird die Seitenlänge des Gevierts als Referenz verwendet. Das Geviert ist ein Quadrat, dessen Seitenlänge dem Mindestzeilenabstand der verwendeten Schrift entspricht, grob sind dies auch die Abmessungen des Großbuchstabens "M".

Wird die Schriftgröße selbst (font-size) in em festgelegt, bezieht sich die Einheit auf die Schriftgröße des Elternelements.

  • CSS 1.0
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari

Längenangaben[Bearbeiten]

Für Längen, die durch em-Angaben definiert werden, wird die berechnete Schriftgröße desjenigen Elements herangezogen, für das die Eigenschaft deklariert wird.

em-Angaben für Längen ansehen …
<!doctype html> <html> <head> <meta charset="utf-8"> <title>em</title> <style> body { font-size: 16px; max-width: 40em; } div { display: inline-block; } .em { border: 1em solid red; padding: 1em;} #div2 { font-size: 2em; } .px { border: 16px solid red; padding: 16px;} #div4 { font-size: 32px; } </style> </head> <body> <h2>border-width: 1em;</h2> <div id="div1" class="em">font-size: 1em;</div> <div id="div2" class="em">font-size: 2em;</div> <h2>border-width: 16px;</h2> <div id="div3" class="px">font-size: 16px;</div> <div id="div4" class="px">font-size: 32px;</div> </body> </html>
Die beiden div-Elemente der Klasse em erhalten einen roten Rahmen der Breite 1em. Da jedoch für das zweite div-Element dieser Klasse eine Schriftgröße von 2em definiert ist, ist im Ergebnis der Rahmen dieses Elements 32px breit.

Zum Vergleich ist zwei div-Elementen eine Rahmenbreite von 16px zugewiesen worden. Eine Änderung der Schriftgröße hat in diesem Fall keinen Einfluss auf die Rahmenbreite.

Beobachten Sie auch, wie sich die Elemente verhalten, wenn gezoomt wird bzw. nur die Schrift vergrößert oder verkleinert wird.

rem[Bearbeiten]

Ein rem (engl: root-em) entspricht der Schriftgröße, die für das Wurzelelement (in HTML das html-Element) festgelegt wurde. Während sich em auf die relative Schriftgröße des Elternelements bezieht und so immer wieder neu berechnet werden muss, bleibt die Schriftgröße bei rem immer gleich, was das Arbeiten mit Größen sehr vereinfacht.

  • Android
  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari

Details: caniuse.com

vererbte Schriftgrößen[Bearbeiten]

Wenn für ein Element die Schriftgröße durch eine em-Angabe definiert wird, wird die berechnete Schriftgröße des Elternelements herangezogen.

em-Angaben für Schriftgrößen ansehen …
:root    { font-size: 1em; }
ul       { font-size: 1.25em; }
aside ul { font-size: 1.25rem; }
Die Schriftgröße von ul beträgt 1.25em ausgehend von der im Elternelement vorhandenen (berechneten), bzw im root-Element festgelegten Schriftgröße.
Für Listen, die sich innerhalb von aside befinden, gilt die Schriftgröße von 1.25rem, die sich auf das Wurzel-Element :root bezieht.
    <ul>
      <li>Möbel nach Ihren Wünschen
        <ul>
          <li>Küchenmöbel</li>
          <li>Regale und Schrankwände</li>
            <ul>
              <li>Sperrholz</li>
              <li>Furnier</li>
              <li>Massivholz</li>
            </ul>
          <li>Badezimmermöbel</li>
        </ul>
      </li>
      <li>Haustüren</li>
      <li>Gartenzäune</li>
      <li>Reparaturen</li>
    </ul>
Fazit:
Links wird jede ul größer, sodass …
  1. ul eine berechnete Schriftgröße von 20px
  2. ul ul von 25px
  3. ul ul ul von 32.5px hat.
Rechts behält jedes Listenelemente seine Schriftgröße von 1.25em, da sie vom Wurzelelement :root aus berechnet wird.

ex[Bearbeiten]

Es gibt noch zwei weitere relative Einheiten, die man in realen Projekten nie sieht:

Das ex ist eine relative Längeneinheit, es gibt die Größe der x-Höhe der verwendeten Schriftart an. In der Drucktechnik bezeichnet ex die Höhe des Kleinbuchstabens x. Ist in der Schriftart keine x-Höhe definiert, so gilt 1ex = 0.5em.

Wenn für ein Element die Schriftgröße durch eine ex-Angabe definiert wird, wird die berechnete Schriftgröße des Elternelements herangezogen, für die Ermittlung anderer Längen, ist die berechnete Schriftgröße des Elements selbst entscheidend.

  • CSS 1.0
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
Beispiel ansehen …
<!doctype html> <html> <head> <meta charset="utf-8"> <title>ex</title> <style> body { font-size: 20px; max-width: 40em; } div { display: inline-block; } .ex { border: 2ex solid red; font-size: 2ex; } #div2 { font-size: 4ex; } .px { border: 20px solid red; } #div4 { font-size: 40px; } </style> </head> <body> <h2>border-width: 2ex;</h2> <div id="div1" class="ex">font-size: 2ex;</div> <div id="div2" class="ex">font-size: 4ex;</div> <h2>border-width: 20px;</h2> <div id="div3" class="px">font-size: 20px;</div> <div id="div4" class="px">font-size: 40px;</div> </body> </html>
Die Schriftgrößen der beiden div-Elemente der Klasse ex wird als Vielfaches der x-Höhe der Schriftgröße des Elternelements (hier body) festgelegt. Diese ist zudem abhängig von der verwendeten Schriftart.

Die Rahmenbreiten dieser Elemente richten sich wiederum nach der x-Höhe der Schrift des Elements selbst.

Beispiel: Die x-Höhe der (für alle betreffenden Elemente) verwendeten Schriftart sei 0.4 und die Schriftgröße des Elternelements sei 16px. Es ergibt sich für das erste div-Element eine Schriftgröße von 16px (2 * 0.4 * 20px), die Rahmenbreite beträgt jedoch für dieses Element jedoch nur 12.8px (2 * 0.4 * 16px).

ch[Bearbeiten]

Das ch (character unit) ist eine relative Längeneinheit, es gibt die Größe der 0-Breite der verwendeten Schriftart an. Ist in der Schriftart keine 0-Höhe definiert, so wird versucht die durchschnittliche Breite aller Zeichen zu berechnen, so dass dieser Wert verwendet werden kann.

  • CSS 1.0
  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari

Wenn für ein Element die Schriftgröße durch eine ch-Angabe definiert wird, wird die berechnete Schriftgröße des Elternelements herangezogen, für die Ermittlung anderer Längen, ist die berechnete Schriftgröße des Elements selbst entscheidend.

Beispiel ansehen …
:root { font-size: 1em; }
.em {max-width: 15em;}
.ex {max-width: 15ex;}
.ch {max-width: 15ch;}
Die Schriftgröße der Klasse ch wird als Vielfaches der 0-Breite der Schriftgröße des Elternelements (hier body) festgelegt. So hat jede Zeile bei 15ch auch 15 Zeichen. Diese ist zudem abhängig von der verwendeten Schriftart.


Weblinks[Bearbeiten]

Quellen:


Siehe auch[Bearbeiten]