Margin-inline-start - Trucchi CSS

La margin-inline-startproprietà in CSS definisce la quantità di spazio lungo il bordo iniziale esterno di un elemento nella direzione in linea. È incluso nella specifica del livello 1 delle proprietà logiche CSS, attualmente in Working Draft.

.element ( margin-inline-start: 25%; writing-mode: vertical-lr; )

Bordo iniziale nella direzione in linea è determinata dalle dell'elemento writing-mode, directione text-orientation. Quindi, quando si utilizza margin-inline-startin un contesto orizzontale da sinistra a destra, si comporta come margin-leftse il bordo iniziale dell'elemento fosse il lato sinistro.

Ma se cambiamo il writing-mode, diciamo, verticale, l'elemento viene ruotato in senso orario, posizionando il bordo iniziale verso l'alto. Di conseguenza, margin-inline-startsi comporta proprio come margin-top. Fondamentalmente, il bordo iniziale è relativo alla direzione in cui scorre. Questo è ciò che intendiamo quando parliamo di proprietà "logiche".

Sintassi

margin-inline-start:

È un po 'strano vedere la sintassi di una proprietà fare riferimento alla sintassi di un'altra proprietà CSS proprio nella documentazione, ma è davvero quello che è. Quello che fondamentalmente sta cercando di dire è che la proprietà accetta gli stessi valori margin-topche seguono questa sintassi:

margin-top: | | auto;

Valore iniziale: 0
Si applica a: tutti gli elementi tranne gli elementi interni della tabella, i contenitori base rubino e i contenitori annotazioni rubino
Ereditato: no
Percentuali: come per la proprietà fisica corrispondente
Valore calcolato: uguale alle margin-*proprietà corrispondenti
Tipo di animazione: per tipo di valore calcolato

Valori

margin-block-start accetta una singola lunghezza o un valore di parola chiave.

/* Length values */ margin-inline-start: 20px; margin-inline-start: 2rem; margin-inline-start: 25%; /* Keyword values */ margin-inline-start: auto; /* Global values */ margin-inline-start: inherit; margin-inline-start: initial; margin-inline-start: unset;