Propriété CSSModèle de boîte

margin-inline

Définit les marges au début et à la fin d’une ligne. La version logique de margin-left et margin-right, qui comprend le sens d’écriture.

Valeur initiale: 0
Héritée: Non
Animable: oui, en tant que longueur ou pourcentage
S’applique à: tous les éléments sauf les éléments internes des tableaux
JavaScript: element.style.marginInline = "auto"

Sur cette page

Exemple
Définition et utilisation
Syntaxe
Valeurs
Valeurs en pratique
Compatibilité des navigateurs
Bonnes pratiques
Entrées associées

Exemple

CSS

.toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
}

.toolbar .logout {
  margin-inline-start: auto;
}

HTML de l’exemple

<style>
  .toolbar { padding: 8px 12px; border-radius: 12px; background: #18181b; }
  .toolbar + .toolbar { margin-top: 10px; }
  .toolbar a { color: inherit; text-decoration: none; }
  .toolbar .logout { padding: 4px 12px; border-radius: 8px; background: #3f3f46; }
</style>
<nav class="toolbar">
  <strong>CodeWorlds</strong>
  <a href="#">Cours</a>
  <a href="#" class="logout">Déconnexion</a>
</nav>
<nav class="toolbar" dir="rtl">
  <strong>CodeWorlds</strong>
  <a href="#">Cours</a>
  <a href="#" class="logout">Déconnexion</a>
</nav>

Aperçu

Une seule règle gère les deux sens. Dans la barre du haut, le lien de déconnexion se place à droite, et dans celle du bas, avec dir="rtl", à gauche, sans aucun style supplémentaire.

Définition et utilisation

La propriété margin-inline est un raccourci pour margin-inline-start et margin-inline-end, les marges extérieures au début et à la fin de l’axe en ligne. L’axe en ligne suit le sens dans lequel le texte s’écoule sur une ligne. En français, cela correspond à la gauche et à la droite, donc margin-inline: 16px fonctionne comme margin-left: 16px; margin-right: 16px.

La différence apparaît avec un autre sens d’écriture. En arabe ou en hébreu (dir="rtl"), une ligne commence à droite, donc la marge de début se déplace elle aussi à droite. En écriture verticale (writing-mode: vertical-rl), les lignes vont de haut en bas, et les marges logiques se retrouvent en haut et en bas. La propriété physique margin-left reste à gauche quelle que soit la langue.

Le raccourci jumeau margin-block définit les marges sur l’axe de bloc, le long duquel s’empilent les paragraphes successifs. Dans un texte horizontal classique, ce sont le haut et le bas, avec pour composantes margin-block-start et margin-block-end. Dans les deux raccourcis, une valeur s’applique aux deux extrémités, et deux valeurs désignent dans l’ordre le début et la fin. Chacune peut être une longueur, un pourcentage ou auto.

Un détail utile : margin-inline: auto centre un bloc de largeur fixe et ne touche ni à la marge du haut ni à celle du bas, contrairement à margin: 0 auto. Les marges sur l’axe de bloc fusionnent entre voisins exactement comme les marges du haut et du bas.

Syntaxe

margin-inline: <début> <fin>?;
margin-block: <début> <fin>?;

Valeurs

40px
<longueur>
Une seule valeur : 40px au début et à la fin de la ligne, donc à gauche et à droite. Les rayures de fond montrent les marges.
80px 0
début fin
La première valeur est le début, la seconde la fin. Dans un texte écrit de gauche à droite, la marge n’apparaît qu’à gauche.
auto
Avec une largeur fixe (ici inline-size: 140px), auto des deux côtés centre le bloc, et les marges du haut et du bas restent inchangées.
dir="rtl"
texte de droite à gauche
La même déclaration 80px 0, mais dans un conteneur avec dir="rtl". La ligne commence à droite, donc la marge s’y déplace aussi.
vertical-rl
écriture verticale
En écriture verticale, la ligne va de haut en bas, donc la marge de début se retrouve en haut. L’élément se place contre le bord droit, car en vertical-rl les blocs successifs s’empilent de droite à gauche.
margin-block: 24px
axe de bloc
Le raccourci pour l’axe de bloc. Dans un texte horizontal, il ajoute 24px au-dessus et au-dessous de l’élément.

Valeur	Type	Description
40px	<longueur>	Une seule valeur : 40px au début et à la fin de la ligne, donc à gauche et à droite. Les rayures de fond montrent les marges.
80px 0	début fin	La première valeur est le début, la seconde la fin. Dans un texte écrit de gauche à droite, la marge n’apparaît qu’à gauche.
auto		Avec une largeur fixe (ici `inline-size: 140px`), `auto` des deux côtés centre le bloc, et les marges du haut et du bas restent inchangées.
dir="rtl"	texte de droite à gauche	La même déclaration `80px 0`, mais dans un conteneur avec `dir="rtl"`. La ligne commence à droite, donc la marge s’y déplace aussi.
vertical-rl	écriture verticale	En écriture verticale, la ligne va de haut en bas, donc la marge de début se retrouve en haut. L’élément se place contre le bord droit, car en `vertical-rl` les blocs successifs s’empilent de droite à gauche.
margin-block: 24px	axe de bloc	Le raccourci pour l’axe de bloc. Dans un texte horizontal, il ajoute 24px au-dessus et au-dessous de l’élément.

Valeurs en pratique

40px

Une seule valeur : 40px au début et à la fin de la ligne, donc à gauche et à droite. Les rayures de fond montrent les marges.

.demo { margin-inline: 40px; }

80px 0

La première valeur est le début, la seconde la fin. Dans un texte écrit de gauche à droite, la marge n’apparaît qu’à gauche.

.demo { margin-inline: 80px 0; }

auto

Avec une largeur fixe (ici inline-size: 140px), auto des deux côtés centre le bloc, et les marges du haut et du bas restent inchangées.

.demo { inline-size: 140px; margin-inline: auto; }

dir="rtl"

La même déclaration 80px 0, mais dans un conteneur avec dir="rtl". La ligne commence à droite, donc la marge s’y déplace aussi.

.demo { margin-inline: 80px 0; }

vertical-rl

En écriture verticale, la ligne va de haut en bas, donc la marge de début se retrouve en haut. L’élément se place contre le bord droit, car en vertical-rl les blocs successifs s’empilent de droite à gauche.

.lane { writing-mode: vertical-rl; width: 100%; height: 150px; }
.demo { margin-inline: 40px 0; }

margin-block: 24px

Le raccourci pour l’axe de bloc. Dans un texte horizontal, il ajoute 24px au-dessus et au-dessous de l’élément.

.demo { margin-block: 24px; }

Compatibilité des navigateurs

Largement disponible · depuis 2021

Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.

Chrome
Edge
Firefox
Safari

Bonnes pratiques

Pour centrer un conteneur de page, margin-inline: auto suffit. À la différence de margin: 0 auto, il n’efface pas les marges du haut et du bas définies dans une autre règle.
Dans une rangée flex, margin-inline-start: auto repousse l’élément à la fin de la ligne, et automatiquement de l’autre côté dans une mise en page de droite à gauche.
Si le site pourrait un jour avoir une version arabe ou hébraïque, écrivez vos composants directement avec les propriétés logiques. Il suffira ensuite de définir dir="rtl" sur l’élément <html>.

Entrées associées

Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.

Leçons gratuitesPratiquez CSS dans le cours HTML et CSSDes exercices avec indices, un éditeur de code et une progression enregistrée au fur et à mesure.Voir le cours