Proprietà CSS margin-block-start

Pagina precedente margin-block-end
Pagina successiva margin-bottom

Definizione e uso

margin-block-start Specifica il margine iniziale della direzione del blocco.

Proprietà di CSS margin-block e margin-inline Proprietà sono simili alla sintassi CSS margin-top,margin-bottom,margin-left e margin-right Proprietà sono molto simili, ma margin-block e margin-inline L'attributo dipende dalla direzione del blocco e dalla direzione della riga.

Nota:Proprietà CSS correlate writing-mode Definisce la direzione del blocco. Questo influisce sulla posizione iniziale e finale del blocco e sul risultato dell'attributo margin-block-start. Per le pagine in inglese, la direzione del blocco è verso il basso e la direzione della riga è da sinistra a destra.

Esempio

Esempio 1

Impostare il margine iniziale della direzione del blocco:

div {
  margin-block-start: 35px;
}

Prova personalmente

Esempio 2

Quando l'elemento <div> ha writing-mode Quando il valore dell'attributo è vertical-rl, la direzione del blocco è da destra a sinistra. Di conseguenza, la posizione iniziale dell'elemento si sposta verso destra. Pertanto, la variazione di writing-mode influisce anche su margin-block-start L'effetto:

#parentDiv {
  writing-mode: vertical-rl;
}
#myDiv {
  margin-block-start: 50px;
}

Prova personalmente

Sintassi CSS

margin-block-start: auto|length|initial|inherit;

Valore dell'attributo

Valore	Descrizione
auto	Valore predefinito. Distanza margine esterno predefinita dell'elemento.
length	Specificare la distanza, in unità come px, pt, cm ecc. Valori negativi ammessi. Vedi:Unità CSS.
%	Specificare la distanza percentuale rispetto alla dimensione dell'elemento padre nella direzione della riga.
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 di animazione:	Supportato. Vedi:Proprietà correlate agli animazioni.
Versione:	CSS3
Sintassi JavaScript:	object.style.marginBlockStart="100px"