CSS/Eigenschaften/inset-inline

Die Eigenschaft inset-inline ist die zusammenfassende Eigenschaft von inset-inline-start und inset-inline-end. Je nach writing-mode, direction und text-orientation des Elements werden die Werte auf eine der physischen Eigenschaften top, right, bottom oder left abgebildet.

Auf welches Element die Inset-Angaben Bezug nehmen, hängt von der Art der Positionierung ab.

Erlaubte Werte

• 1-2 Längenangaben oder Prozentangaben

Vererbung steuernde Werte inherit, initial, unset und revert

Standardwert

0

anwendbar auf

Elemente mit position ≠ static

Vererbung

nein

animierbar

ja

Beispiel

.box { 
  position: absolute;
  inset-inline: 2em 1em;
  writing-mode: vertical-rl;  
}

Für das Element mit der Klasse box gilt writing-mode:vertical-rl, die Schreibrichtung (die Inlinerichtung) läuft demnach von oben nach unten und die Zeilenanordnung (die Blockrichtung) von rechts nach links. Die Angabe inset-inline:2em 1em verschiebt den Inlinestart-Rand des Elements in Inlinerichtung (hier also den oberen Rand nach unten) und den Inlineende-Rand entgegen der Inlinerichtung um 1em (hier also den unteren Rand nach oben).

Beachten Sie: Die Angabe von Start- und End-Inset in einer Richtung hat nur dann eine Wirkung, wenn das Element positioniert ist (absolute oder fixed). Andernfalls wird nur der Start-Inset beachtet.

Empfehlung: Wird nur ein Wert angegeben, gilt der angegebene Wert für beide Seiten.

Siehe auch

• logische Eigenschaften

Weblinks

• Spezifikation (W3C): inset-inline CSS Logical Properties and Values Level 1