Propriété margin-inline-start de CSS

Page précédente marge-horizontale-finale
Page suivante marge-gauche

Définition et utilisation

margin-inline-start Définit la marge extérieure de départ du début de l'orientation en ligne.

CSS margin-inline et margin-block Les attributs sont similaires à margin-top,margin-bottom,marge-gauche 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 :les attributs CSS associés 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 margin-inline-start Le résultat de l'attribut. 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éfinir la marge de départ en ligne :

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

Essayez-le vous-même

Exemple 2

Lorsque l'attribut <div> est writing-mode Lorsque la valeur de l'attribut est définie sur 'vertical-rl', la direction en ligne est vers le bas. Le résultat est que le point de départ de l'élément se déplace du côté gauche vers le haut :

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

Essayez-le vous-même

Exemple 3

Lorsque l'attribut <div> est direction Lorsque la valeur de l'attribut est définie sur 'rtl', la direction en ligne est de droite à gauche. Le résultat est que le point de départ visuel de l'élément est toujours appliqué à partir de la position de gauche d'origine, mais en raison de la direction de droite à gauche, l'effet de mise en page réel est différent :

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

Essayez-le vous-même

Syntaxe CSS

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

Valeur de l'attribut

Valeur	Description
auto	Valeur par défaut. Valeur par défaut de margin-inline-start de l'élément.
length	Définit margin-inline-start en unités telles que px, pt, cm, etc. Les valeurs négatives sont autorisées. Voir :Unités CSS.
%	Définit margin-inline-start en pourcentage de la taille de l'élément parent dans la direction en 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
Création d'animation :	Prise en charge. Voir :Propriétés liées aux animations.
Version :	CSS3
Syntaxe JavaScript :	object.style.marginInlineStart="50px"