Proprietà CSS margin-block-end

Pagina precedente margin-block
Pagina successiva margin-block-start

Definizione e uso

margin-block-end specifica il margine alla fine della direzione del blocco.

L'attributo di CSS margin-block e margin-inline Le proprietà di CSS Le proprietà sono molto simili, mamargin-bottommargin-topmargin-bottom, e margin-left margin-right margin-block e margin-inline L'attributo dipende dalla direzione del blocco e dalla direzione della riga.

Attenzione:proprietà CSS correlate writing-mode Definisce la direzione del blocco. Questo influisce sulla posizione di inizio e fine del blocco e sugli margin-block-end Il risultato dell'attributo. Per le pagine in inglese, la direzione del blocco è verso il basso e la direzione della riga è da sinistra a destra.

Esempio

Esempio 1

Imposta il margine esterno alla fine della direzione del blocco:

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

Prova tu stesso

Esempio 2

Quando l'elemento <div> ha writing-mode Quando l'attributo è impostato su vertical-rl, la direzione del blocco è da destra a sinistra. Di conseguenza, la posizione finale dell'elemento si sposta da basso a sinistra. Pertanto, la variazione di writing-mode influisce anche sull'effetto di margin-block-end:

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

Prova tu stesso

Sintassi CSS

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

Valore dell'attributo

Valore	Descrizione
auto	Valore predefinito. Margine esterno predefinito dell'elemento.
length	Specifica la distanza, unita in px, pt, cm ecc. Permette valori negativi. Vedi:Unità CSS.
%	Specifica la distanza percentuale in relazione alla dimensione dell'elemento padre nella direzione della riga.
initial	Imposta questo attributo al suo valore predefinito. Vedi initial.
inherit	Inherita da questo attributo dal suo elemento padre. Vedi inherit.

Dettagli tecnici

Valore predefinito:	auto
Ereditarietà:	No
Produzione di animazioni:	Supportato. Vedi:Proprietà correlate agli animazioni.
Versione:	CSS3
Sintassi JavaScript:	object.style.marginBlockEnd="20px"