Margin-inline-end - Trucchi CSS

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

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

Il bordo che termina nella direzione in linea è determinata dalle dell'elemento writing-mode, directione text-orientation. Quindi, quando si utilizza margin-inline-endin un contesto orizzontale da sinistra a destra, si comporta come margin-rightse il bordo finale dell'elemento fosse il lato destro.

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

Sintassi

margin-inline-end:

È 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-end: 20px; margin-inline-end: 2rem; margin-inline-end: 25%; /* Keyword values */ margin-inline-end: auto; /* Global values */ margin-inline-end: inherit; margin-inline-end: initial; margin-inline-end: unset;