Einschubblock - CSS-Tricks

inset-blockist eine logische Kurzform-CSS-Eigenschaft, die die Länge festlegt, um die ein Element in Blockrichtung versetzt ist, indem inset-block-startund kombiniert wird inset-block-end. Es ist irgendwie wie erklärt topund bottomaußer seinem Start- und Endpunkten des Elements bestimmt werden direction, text-orientationund writing-mode, genau wie andere logische Eigenschaften.

Die Eigenschaft ist Teil der Spezifikation für logische CSS-Eigenschaften und -Werte der Ebene 1, die sich derzeit im Entwurfsstatus des Editors befindet. Das bedeutet, dass sich die Definition und Informationen darüber 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 beispielsweise der Schreibmodus auf horizontal-lrdie inset-blockEigenschaft festgelegt ist, verhält es sich wie beim Festlegen topund Festlegen bottomdes Versatzes des Elements von der unteren Kante. Sie müssen sogar ein explizites positionElement für dasselbe Element angeben, damit es wirksam wird, genau wie physikalische Offset-Eigenschaften.

Ändern Sie die Elemente jedoch writing-modein "Ähnliches", vertical-lrund die "untere" Kante wird in vertikaler Richtung gedreht, wobei sie sich eher wie die leftund right-Eigenschaften verhält.

Syntax

inset-block: ;

• Ursprünglicher Wert: auto
• Gilt für: positionierte Elemente
• Geerbt: nein
• Prozentsätze: wie für die entsprechende physikalische Eigenschaft
• Berechneter Wert: wie korrespondierend topund bottomEigenschaften
• Animationstyp: nach berechnetem Werttyp

Werte

inset-blockNimmt einen Längenwert und unterstützt globale Schlüsselwörter. Der 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;

Browser-Unterstützung

IE	Kante	Feuerfuchs	Chrom	Safari	Oper
Nein	Nein	63+	Nein	Nein	Nein

Android Chrome	Android Firefox	Android Browser	iOS Safari	Opera Mini
Nein	79+	Nein	Nein	Nein

Demo

Weiterführende Literatur

• Spezifikation der logischen Eigenschaften und Werte von CSS Level 1 (Entwurf des Herausgebers)
• MDN-Dokumentation
• Grundlegendes zu logischen Eigenschaften und Werten (Smashing Magazine)
• Logische CSS-Eigenschaften (Adrian Roselli)
• Bidirektionale horizontale Regeln in CSS (Hussein Al Hammad)