Attribut margin-block CSS

Page précédente marge
Page suivante margin-block-end

Définition et utilisation

margin-block L'attribut spécifie la marge extérieure du bord de départ et de fin dans la direction de bloc, c'est une abréviation des attributs suivants :

margin-block-start
margin-block-end

margin-block La valeur de l'attribut peut être définie de différentes manières :

Si l'attribut margin-block a deux valeurs :

margin-block: 10px 50px;

La marge extérieure du bord de départ est de 10px
La marge de l'extrémité inférieure est de 50px

Si l'attribut margin-block a une valeur :

margin-block: 10px;

Les marges des bords de début et de fin sont toutes de 10px

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 de bloc et de la direction de ligne.

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

Exemple

Exemple 1

Définit la marge externe des deux côtés de la direction de bloc :

div {
  margin-block: 35px;
}

Essayez-le vous-même

Exemple 2

Lorsque l'élément <div> a writing-mode Lorsque la valeur de l'attribut writing-mode est vertical-rl, la position de début de l'élément dans la direction de bloc est déplacée vers la droite depuis le haut, et la position de fin de l'élément est déplacée vers la gauche depuis le bas. Le changement de writing-mode affecte également l'effet de margin-block :

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

Essayez-le vous-même

Syntaxe CSS

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

Valeur de l'attribut

Valeur	Description
auto	Valeur par défaut. Valeur par défaut de margin-block de l'élément.
length	Spécifiez margin-block en unités telles que px, pt, cm, etc. Les valeurs négatives sont autorisées. Voir :Unités CSS.
%	Définit la marge margin-block en pourcentage de la taille de l'élément parent dans la direction de ligne.
initial	Réinitialise 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 :	Prises en charge. Voir :Propriétés liées aux animations.
Version :	CSS3
Syntaxe JavaScript :	object.style.marginBlock="50px 20px"