Propriété margin-block-end de CSS

Page précédente margin-block
Page suivante margin-block-start

Définition et utilisation

margin-block-end Définit la marge de fin de la direction du bloc.

Les attributs de CSS margin-block et margin-inline Les attributs sont similaires à ceux de CSS margin-top,margin-bottom,margin-left et margin-right Les attributs sont très similaires, mais margin-block et margin-inline L'attribut dépend de la direction du bloc et de la direction de ligne.

Remarque :les propriétés CSS associées writing-mode Définit la direction du bloc. Cela affecte la position de début et de fin du bloc ainsi que margin-block-end Le résultat de l'attribut. Pour les pages en anglais, la direction du bloc est vers le bas, et la direction de ligne est de gauche à droite.

Exemple

Exemple 1

Définir la marge extérieure à la fin de la direction du bloc :

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

Essayez-le vous-même

Exemple 2

Lorsque l'élément <div> writing-mode Lorsque la valeur de l'attribut writing-mode est vertical-rl, la direction du bloc est de droite à gauche. Le résultat est que la position de fin de l'élément se déplace du bas à gauche. Par conséquent, le changement de writing-mode affecte également l'effet de margin-block-end :

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

Essayez-le vous-même

Syntaxe CSS

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

Valeur de l'attribut

Valeur	Description
auto	Valeur par défaut. Marge extérieure par défaut de l'élément.
length	Définit une distance, en unités comme px, pt, cm, etc. Les valeurs négatives sont autorisées. Voir :Unités CSS.
%	Définit une distance en pourcentage par rapport à la taille de l'élément parent dans la direction de ligne.
initial	Règle cette propriété à sa valeur par défaut. Voir initial.
inherit	Inherits this property from its parent element. Voir inherit.

Détails techniques

Valeur par défaut :	auto
Héritabilité :	Non
Réalisation des animations :	Prise en charge. Voir :Propriétés liées aux animations.
Version :	CSS3
Syntaxe JavaScript :	object.style.marginBlockEnd="20px"