Inset-block | CSS-Tricks

inset-block ist eine kurz gefasste logische CSS-Eigenschaft, die die Länge festlegt, um die ein Element in Blockrichtung versetzt wird, indem inset-block-start und inset-block-end kombiniert werden. Es ist sozusagen eine Deklaration von top und bottom, außer dass seine Start- und Endpunkte durch die direction, text-orientation und writing-mode des Elements bestimmt werden, genau wie bei anderen logischen Eigenschaften.

Die Eigenschaft ist Teil der CSS Logical Properties and Values Level 1 specification, die sich derzeit im Entwurfsstatus befindet. Das bedeutet, dass die Definition und Informationen dazu sich zwischen jetzt und der offiziellen Empfehlung ändern können.

.element {
  inset-block: 50px 15%;
  position: relative; /* Apples to positioned elements */
  writing-mode: vertical-rl; /* Determines the block start direction */
}

Wenn also beispielsweise der Schreibmodus auf horizontal-lr gesetzt ist, wirkt sich die inset-block-Eigenschaft genauso aus wie die Einstellung von top und bottom und versetzt das Element vom unteren Rand. Sie müssen sogar eine explizite position auf demselben Element angeben, damit sie wirksam wird, genau wie bei physischen Offset-Eigenschaften.

Wenn Sie jedoch den writing-mode des Elements auf etwas wie vertical-lr ändern, wird der "untere" Rand vertikal gedreht und verhält sich eher wie die Eigenschaften left und right.

Syntax

inset-block: <'top'> <'bottom'>;

Anfangswert: auto
Gilt für: positionierte Elemente
Vererbt: nein
Prozentsätze: wie für die entsprechende physische Eigenschaft
Berechneter Wert: wie die entsprechenden top- und bottom-Eigenschaften
Animationstyp: nach berechnetem Werttyp

Werte

inset-block nimmt einen Längenwert an und unterstützt globale Schlüsselwörter. Sein Standardwert ist auto.

/* Length values */
inset-block: 50px;
inset-block: 4em;
inset-block: 3.5rem
inset-block: 25vh;

/* Percentage values */
inset-block: 50%;

/* Keyword values */
inset-block: auto; /* initial value */

/* Global values */
inset-block: initial
inset-block: inherit;
inset-block: unset;