<relative-size>

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

Syntax

<relative-size> = smaller | larger

Werte

Der <relative-size>-Datentyp wird durch einen aus der folgenden Liste ausgewählten Stichwortwert definiert.

smaller

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

larger

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

Beschreibung

Die <relative-size>-Stichwörter beziehen sich auf die aktuelle Größe des Elements. Wenn die geerbte Größe mit einem <absolute-size>-Stichwort definiert ist, entspricht der <relative-size>-Wert der angrenzenden Größe in der <absolute-size>-Tabelle. Andernfalls liegt die relative Vergrößerung oder Verkleinerung der Größe zwischen 120 % und 150 %.

Beispiele

Vergleich der Stichwortwerte

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