<relative-size>

Der <relative-size> CSS Datentyp beschreibt relative Größen-Schlüsselwörter. Die Schlüsselwörter des <relative-size> definieren eine Größe relativ zur berechneten Größe des Elternelements. Dieser Datentyp wird in den font-Kurzform- und font-size-Eigenschaften verwendet.

Syntax

<relative-size> = smaller | larger

Werte

Der <relative-size> Datentyp wird mit einem Schlüsselwert aus der folgenden Liste definiert.

smaller

Eine relative Größe, die eine Größe kleiner als die geerbte Größe ist.

larger

Eine relative Größe, die eine Größe größer als die geerbte Größe ist.

Beschreibung

Die <relative-size> Schlüsselwörter sind relativ zur aktuellen Größe des Elements. Wenn die geerbte Größe mit einem <absolute-size> Schlüsselwort definiert ist, entspricht der <relative-size> Wert der angrenzenden Größe in der <absolute-size> Tabelle. Andernfalls liegt die relative Vergrößerung oder Verkleinerung zwischen 120% und 150%.

Beispiele

Vergleich der Schlüsselwortwerte

html
<ul>
  <li class="smaller">font-size: smaller;</li>
  <li>font-size is not specified</li>
  <li class="larger">font-size: larger;</li>
</ul>
css
li {
  margin-bottom: 0.3em;
}
.smaller {
  font-size: smaller;
}
.larger {
  font-size: larger;
}

Ergebnis

Spezifikationen

Specification
CSS Fonts Module Level 4
# valdef-font-size-relative-size

Siehe auch