CSS/Wertetypen/Zahlen, Maße und Maßeinheiten/em

Aus SELFHTML-Wiki
< CSS‎ | Wertetypen‎ | Zahlen, Maße und Maßeinheiten(Weitergeleitet von Em)
Wechseln zu: Navigation, Suche

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 verwendet die Größe der verwendeten Schriftart als Basisschriftgröße. In der Drucktechnik bezeichnet em das Verhältnis von Zeichenbreite zur Schrifthöhe. 1em ist dort die Breite des Gevierts, ungefähr die Breite des Großbuchstabens M.

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

Schriftgröße[Bearbeiten]

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

Beispiel: em-Angaben für Schriftgrößen ansehen …
<!doctype html> <html> <head> <meta charset="utf-8"> <title>em-Angaben für Schriftgrößen</title> <style> body { font-size: 40px; max-width: 20em;} p { font-size: .8em; } strong { font-size: 1.25em; font-weight: normal; } small { font-size: .5em; } </style> </head> <body> Festgelegte Schriftgröße von 40px <p>Textabsatz mit 0,8em. Das ergibt eine Schriftgröße von 32px.</p> <p>Ein <small>small-Element direkt in einem Absatz</small> hat eine andere Schriftgröße als ein <strong><small>small-Element</small>, welches zusätzlich noch in einem strong-Element steckt</strong>.</p> </body> </html>
Es ergeben sich also folgende Schriftgrößen:
  • body: 40px
  • p: 32px (40 × 0.8)
  • p small: 16px (40 × 0.8 × 0.5)
  • p strong: 40px (40 × 0.8 × 1.25)
  • p strong small: 20px (40 × 0.8 × 1.25 × 0.5)
Beachten Sie: Chrome und Co berücksichtigen bei der Umrechnung von in em angegebenen Schriftgrößen in die konkrete Pixelanzahl offensichtlich eine Mindestschriftgröße. Eine Angabe von .1em wird
  • im Chrome zu 6px
  • in Firefox, Internet Explorer und im Opera 12 wie erwartet zu 1.6px.[1]

Längenangaben[Bearbeiten]

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

Beispiel: 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; } #div2 { font-size: 2em; } .px { border: 16px solid red; } #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.

Quellen[Bearbeiten]

  1. SELFHTML-Forum: devel - Thread-Ansicht - Pfeil - aktiver Post März 2014

Siehe auch[Bearbeiten]