Inset-block-end - Trucchi CSS

inset-block-endè una proprietà CSS logica che imposta la lunghezza di offset di un elemento nella direzione del blocco dal bordo finale. È sorta di come dichiarare bottomtranne il suo punto finale è determinato dall'elemento di direction, text-orientatione writing-mode, come le altre proprietà logiche.

La proprietà fa parte della specifica CSS Logical Properties and Values Level 1 che si trova attualmente nello stato Bozza dell'editor. Ciò significa che la definizione e le informazioni al riguardo possono cambiare da ora fino alla raccomandazione ufficiale.

.element ( inset-block-end: 50px; position: relative; /* Apples to positioned elements */ writing-mode: vertical-rl; /* Determines the block start direction */ )

Quindi, ad esempio, se la modalità di scrittura è impostata horizontal-lrsulla inset-block-endproprietà, agirà esattamente come bottome imposterà l'offset dell'elemento dal bordo inferiore. È anche necessario specificare un esplicito positionsullo stesso elemento affinché abbia effetto, proprio come bottome altre proprietà di offset fisico.

Ma cambia l'elemento writing-modein qualcosa di simile vertical-lre il bordo "inferiore" viene ruotato in direzione verticale, agendo più come la rightproprietà.

Sintassi

inset-block-end: ;

Valore iniziale: auto
Si applica a: elementi posizionati
Ereditato: no
Percentuali: come per la proprietà fisica corrispondente
Valore calcolato: uguale alla bottomproprietà corrispondente
Tipo di animazione: per tipo di valore calcolato

Valori

inset-block-endaccetta un valore di lunghezza e supporta parole chiave globali. Il suo valore predefinito è auto.

/* Length values */ inset-block-end: 50px; inset-block-end: 4em; inset-block-end: 3.5rem inset-block-end: 25vh; /* Percentage values */ inset-block-end: 50%; /* Keyword values */ inset-block-end: auto; /* initial value */ /* Global values */ inset-block-end: initial inset-block-end: inherit; inset-block-end: unset;