Margin-inline - Trucchi CSS | CSS Almanac 2025

margin-inlineè una proprietà abbreviata in CSS che imposta i valori margin-inline-starte di un elemento margin-inline-end, entrambi proprietà logiche. Si crea lo spazio attorno all'elemento nella direzione in linea, che è determinato dall'elemento di writing-mode, directione text-orientation.

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 ( margin-inline: 60px auto; writing-mode: vertical-rl; /* Determines the inline start direction */ )

Se writing-modeè impostato su horizontal-lr, la margin-inlineproprietà si comporterà esattamente come l'impostazione margin-lefte margin-right. Un aspetto interessante di questa proprietà è che è una delle proprietà logiche che non ha una mappa uno-a-uno con una proprietà non logica. Non esiste una proprietà precedente che imposta entrambi (e solo) i margini della direzione in linea.

Ma cambia l'elemento writing-modein qualcosa di simile vertical-lre i bordi "in linea" vengono ruotati in direzione verticale, agendo più come le proprietà margin-tope margin-bottom.

Sintassi

margin-inline: (1,2)

È 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 di margin-top(fino a due volte) che segue 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

Se hai familiarità con la marginproprietà della stenografia, margin-inlineti sembrerà molto familiare. L'unica differenza è che funziona in due direzioni invece che in quattro.

/* Length values */ margin-inline: 20px 40px; margin-inline: 2rem 4rem; margin-inline: 25% 15%; margin-inline: 20px; /* a single value sets both values */ /* Keyword values */ margin-inline: auto; /* Global values */ margin-inline: inherit; margin-inline: initial; margin-inline: unset;