Propriété margin-inline CSS

Page précédente margin-bottom
Page suivante margin-inline-end

Définition et utilisation

margin-inline La propriété spécifie la marge extérieure de début et de fin dans la direction de ligne, c'est une abréviation des propriétés suivantes :

margin-inline Les valeurs de la propriété peuvent être définies de différentes manières :

Si la propriété margin-inline a deux valeurs :

margin-inline: 10px 50px;

La marge extérieure au début est de 10px
La marge extérieure à la fin est de 50px

Si la propriété margin-inline a une valeur :

margin-inline: 10px;

Les marges extérieures de début et de fin sont toutes de 10px

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

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

Exemple

Exemple 1

Définit la marge latérale dans la direction de ligne :

div {
  margin-inline: 35px;
}

Essayez-le vous-même

Exemple 2

Lorsque l'attribut de l'élément <div> writing-mode Lorsque la valeur de l'attribut est 'vertical-rl', la direction de ligne est vers le bas. Le résultat est que la position de départ de l'élément se déplace de la gauche vers le haut et la position de fin se déplace de la droite vers le bas :

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

Essayez-le vous-même

Exemple 3

Lorsque l'attribut de l'élément <div> direction Lorsque la valeur de l'attribut est 'rtl', la direction de ligne est de droite à gauche. Le résultat est que la position de départ de l'élément se déplace de la gauche vers la droite et la position de fin se déplace de la droite vers la gauche :

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

Essayez-le vous-même

Syntaxe CSS

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

Valeur de l'attribut

Valeur	Description
auto	Valeur par défaut. Valeur par défaut de margin-inline pour l'élément.
length	Définit margin-inline avec des unités comme px, pt, cm. Les valeurs négatives sont autorisées. Voir :Unités CSS.
%	Définit le pourcentage de la taille de l'élément parent dans la direction de ligne pour margin-inline.
initial	Règle cette propriété à sa valeur par défaut. Voir : initial.
inherit	Inherits cette propriété de son élément parent. Voir : inherit.

Détails techniques

Valeur par défaut :	auto
Héritabilité :	Non
Réalisation des animations :	Supporté. Voir :Propriétés liées aux animations.
Version :	CSS3
Syntaxe JavaScript :	object.style.marginInline="50px 10px"