Proprietà margin-inline CSS

Pagina precedente margin-bottom
Pagina successiva margin-inline-end

Definizione e utilizzo

margin-inline L'attributo specifica i margini iniziali e finali nella direzione della riga, è un'abbreviazione degli attributi seguenti:

margin-inline Il valore dell'attributo può essere impostato in diversi modi:

Se l'attributo margin-inline ha due valori:

margin-inline: 10px 50px;

Il margine esterno all'inizio è di 10px
Il margine esterno alla fine è di 50px

Se l'attributo margin-inline ha un valore:

margin-inline: 10px;

I margini iniziali e finali sono 10px

CSS margin-inline e margin-block L'attributo è correlato a margin-top,margin-bottom,margin-left e margin-right Le proprietà sono molto simili, ma margin-inline e margin-block L'attributo dipende dalla direzione del blocco e della direzione in linea.

Attenzione:Proprietà CSS correlate writing-mode e direction Definisce la direzione in linea. Questo influisce sulla posizione iniziale e finale dell'elemento, nonché sul risultato dell'attributo margin-inline-end. Per le pagine in inglese, la direzione del blocco è verso il basso e la direzione in linea è da sinistra a destra.

Esempio

Esempio 1

Imposta il margine laterale in direzione della riga:

div {
  margin-inline: 35px;
}

Prova personalmente

Esempio 2

Quando l'attributo di un elemento <div> è writing-mode Quando il valore dell'attributo è impostato su 'vertical-rl', la direzione della riga è verso il basso. Di conseguenza, la posizione iniziale dell'elemento si sposta dalla sinistra alla cima e la posizione finale si sposta dalla destra in basso:

div {
  margin-inline: 10px 50px;
  writing-mode: vertical-rl;
}

Prova personalmente

Esempio 3

Quando l'attributo di un elemento <div> è direction Quando il valore dell'attributo è impostato su 'rtl', la direzione della riga è da destra a sinistra. Di conseguenza, la posizione iniziale dell'elemento si sposta dalla sinistra alla destra e la posizione finale si sposta dalla destra alla sinistra:

div {
  margin-inline: 10px 50px;
  direction: rtl;
}

Prova personalmente

Sintassi CSS

margin-inline: auto|length|initial|inherit;

Valore dell'attributo

Valore	Descrizione
auto	Valore predefinito. Valore predefinito del margine inline dell'elemento.
length	Specifica il margine inline in unità come px, pt, cm. Permette valori negativi. Vedi:Unità CSS.
%	Specifica il margine inline in percentuale rispetto alla dimensione dell'elemento padre in direzione orizzontale.
initial	Imposta questa proprietà al suo valore predefinito. Vedi initial.
inherit	Eredita questa proprietà dal suo elemento padre. Vedi inherit.

Dettagli tecnici

Valore predefinito:	auto
Ereditarietà:	No
Produzione animazione:	Supportato. Vedi:Proprietà correlate agli animazioni.
Versione:	CSS3
Sintassi JavaScript:	object.style.marginInline="50px 10px"