CSS/Wertetypen/Maßangaben/relative Einheiten
- 15min
- leicht
Dieser Artikel beschreibt die relativen Längeneinheiten em, rem, ex und ch, die auf der Schriftgröße des Elements basieren.
Inhaltsverzeichnis
em
Der Begriff em ist mehrdeutig.Dieser Artikel behandelt die CSS-Maßeinheit em. Für das gleichnamige HTML-Element zur Textauszeichnung siehe HTML/Elemente/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.
Längenangaben
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.
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; }
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
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.
vererbte Schriftgrößen
Wenn für ein Element die Schriftgröße durch eine em-Angabe definiert wird, wird die berechnete Schriftgröße des Elternelements herangezogen.
: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 …
-
uleine berechnete Schriftgröße von 20px -
ul ulvon 25px -
ul ul ulvon 32.5px hat.
Rechts behält jedes Listenelemente seine Schriftgröße von 1.25em, da sie vom Wurzelelement :root aus berechnet wird.
Es gibt noch weitere relative Einheiten, die man in realen Projekten (fast) nie sieht:
ex
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.
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; }
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
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-Breite definiert, so wird versucht die durchschnittliche Breite aller Zeichen zu berechnen, so dass dieser Wert verwendet werden kann.
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.
: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.
lh
Die lh (line-height unit) ist eine relative Längeneinheit, die dem berechneten Wert der line-height des Elements entspricht, für das sie verwendet wird, umgerechnet in eine absolute Länge. [1][2][3]
Manchmal ist es sinnvoll, die Zeilenhöhe zum Maßstab zu nehmen, so beim Vertikalen Rhythmus oder um Inline-SVG-Icons passgenau zu formatieren:
.icon {
background: #dfac20;
border-radius: 50%;
display: inline-block;
vertical-align: top;
margin-left: 1em;
}
.em {
width: 1em;
height: 1em;
}
.lh {
width: 1lh;
height: 1lh;
}
Die Icons sollen den gesamten verfügbaren Raum der Zeile ausfüllen. Mit einer Festlegung in em müsste man herumprobieren und eine Magic Number verwenden.
Mit der lh-Einheit ist dies ein Kinderspiel!
Siehe auch
Weblinks
Quellen:
- ↑ Relative length units based on font (mdn)
- ↑ W3C: lh Unit (CSS Values and Units Module Level 4) W3C Working Draft, 6 April 2023
- ↑ Line-height tricks made simpler with the ‘lh’ CSS unit Dan Cătălin Burzo
