Inset-block-start - Trucchi CSS

inset-block-startè una proprietà CSS logica che imposta la lunghezza di offset di un elemento nella direzione del blocco dal suo bordo iniziale. È un po 'come una dichiarazione, toptranne per il fatto che il suo punto di partenza è determinato dagli elementi direction, text-orientatione writing-mode, proprio come 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-start: 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-startproprietà, agirà esattamente come tope imposterà l'offset dell'elemento dal suo bordo iniziale, che è il bordo superiore. È anche necessario specificare un esplicito positionsullo stesso elemento affinché abbia effetto, proprio come tope altre proprietà di offset fisico.

Ma cambia l'elemento writing-modein qualcosa di simile vertical-rle il bordo iniziale viene ruotato in direzione verticale, agendo più come la leftproprietà.

Sintassi

inset-block-start: ;

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

Valori

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

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