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

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

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).

Siehe auch[Bearbeiten]