<relative-size>

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

Syntax

<relative-size> = smaller | larger

Werte

Der <relative-size>-Datentyp wird mit einem Schlüsselwortwert definiert, der aus der unten stehenden Liste ausgewählt wird.

smaller

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

larger

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

Beschreibung

Die <relative-size>-Schlüsselwörter sind relativ zur aktuellen Größe des Elements. Wenn die vererbte 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 der Größe 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