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

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Das ch 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.

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.

  • CSS 1.0
  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari
Beispiel ansehen …
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ch</title>
    <style>
      section { display: inline-block; }
      .ch     { border: 2ex solid red; font-size: 2ch; }
      .px     { border: 20px solid red; }
      #sec2   { font-size: 4ch; }
      #sec4   { font-size: 40px; }
    </style>
  </head>
  <body>
    <h2>border-width: 2ch;</h2>
    <section id="sec1" class="ch">font-size: 2ch;</section>
    <section id="sec2" class="ch">font-size: 4ch;</section>
    <h2>border-width: 20px;</h2>
    <section id="sec3" class="px">font-size: 20px;</section>
    <section id="sec4" class="px">font-size: 40px;</section>
  </body>
</html>
Die Schriftgrößen der beiden section-Elemente der Klasse ch wird als Vielfaches der 0-Breite 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 0-Breite der Schrift des Elements selbst.

Beispiel: Die 0-Breite 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 section-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]