Propriété CSS `margin-right`

Baseline

Large disponibilité

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.

* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.

Voir la compatibilité complète
En savoir plus

La propriété CSS margin-right définit la zone de marge à droite d'un élément. Une valeur positive l'éloigne de ses voisins, tandis qu'une valeur négative la rapproche.

Les marges des côtés droit et gauche de deux boîtes adjacentes peuvent fusionner entre elles. C'est ce qu'on appelle la fusion de marges.

Exemple interactif

margin-right: 1em;

margin-right: 10%;

margin-right: 10px;

margin-right: 0;

<section id="default-example">
  <div id="container">
    <div class="col"></div>
    <div class="col transition-all" id="example-element"></div>
    <div class="col"></div>
  </div>
</section>

#container {
  width: 300px;
  height: 200px;
  display: flex;
  align-content: flex-start;
  justify-content: flex-start;
}

.col {
  width: 33.33%;
  border: solid #5b6dcd 10px;
  background-color: rgb(229 232 252 / 0.6);
  flex-shrink: 0;
}

#example-element {
  border: solid 10px #ffc129;
  background-color: rgb(255 244 219 / 0.6);
}

Syntaxe

css

/* Valeur de type <length> */
margin-right: 20px; /* Une longueur absolue */
margin-right: 1em; /* Une longueur relative à la taille du texte */
margin-right: 5%; /* Une marge relative à la largeur du bloc englobant */
margin-right: anchor-size(self-block);
margin-right: calc(anchor-size(--my-anchor height, 20px) / 4);

/* Valeur avec un mot-clé */
margin-right: auto;

/* Valeurs globales */
margin-right: inherit;
margin-right: initial;
margin-right: revert;
margin-right: revert-layer;
margin-right: unset;

La valeur de la propriété margin-right peut être le mot-clé auto, une longueur (<length>) ou un pourcentage (<percentage>).

Valeurs

<length>

La taille de la marge en valeur fixe.

Pour les éléments positionnés par une ancre, la fonction anchor-size() donne une valeur <length> relative à la largeur ou la hauteur de l'élément ancre associé (voir Définir la marge d'un élément selon la taille de l'ancre).

<percentage>

La taille de la marge en pourcentage, relative à la taille en incise (largeur dans une langue horizontale, définie par writing-mode) du bloc englobant.

auto

La marge droite reçoit une part de l'espace horizontal inutilisé, déterminée principalement par le mode de disposition utilisé. Si les valeurs de margin-left et margin-right sont toutes deux auto, l'espace calculé est réparti équitablement. Ce tableau résume les différents cas :

Valeur de `display`	Valeur de `float`	Valeur de `position`	Valeur calculée pour `auto`	Commentaires
`inline`, `inline-block`, `inline-table`	n'importe laquelle	`static` ou `relative`	`0`	Disposition en incise
`block`, `inline`, `inline-block`, `block`, `table`, `inline-table`, `list-item`, `table-caption`	n'importe laquelle	`static` ou `relative`	`0` sauf si `margin-left` et `margin-right` valent `auto`. Dans ce cas, la valeur utilisée sera celle qui permet de centrer l'élément au sein de l'élément parent.	Disposition en bloc
`block`, `inline`, `inline-block`, `block`, `table`, `inline-table`, `list-item`, `table-caption`	`left` ou `right`	`static` ou `relative`	`0`	Disposition en bloc avec les éléments flottants
n'importe quelle `table-` sauf* `table-caption`	n'importe laquelle	n'importe laquelle	`0`	Les éléments `table-*` n'ont pas de marge, il faut utiliser `border-spacing` à la place.
n'importe quelle autre sauf `flex`, `inline-flex` ou `table-*`	n'importe laquelle	`fixed` ou `absolute`	`0` sauf si `margin-left` et `margin-right` valent `auto`. Dans ce cas, la valeur utilisée est celle qui permet de centrer la boîte de bordure dans la zone de largeur disponible si elle fixée.	Positionnement absolu.
`flex`, `inline-flex`	n'importe laquelle	n'importe laquelle	`0`, sauf s'il reste de l'espace horizontal libre. Dans ce cas, l'espace restant est distribué de façon équitable entre toutes les marges avec `auto`.	Boîtes flexibles.

Définition formelle

Valeur initiale	`0`
Applicabilité	tous les éléments exceptés ceux dont les types `display` pour les tableaux ne sont pas `table-caption`, `table` et `inline-table`. S'applique aussi à `::first-letter`.
Héritée	non
Pourcentages	se rapporte à la largeur du bloc contenant
Valeur calculée	le pourcentage tel que défini ou une longueur absolue
Type d'animation	une longueur

Syntaxe formelle

margin-right = 
  <length-percentage>  |
  auto                 |
  <anchor-size()>      

<length-percentage> = 
  <length>      |
  <percentage>  

<anchor-size()> = 
  anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )  

<anchor-name> = 
  <dashed-ident>  

<anchor-size> = 
  width        |
  height       |
  block        |
  inline       |
  self-block   |
  self-inline

Exemples

Définir la marge droite en pixels et en pourcentage

css

.content {
  margin-right: 5%;
}
.side-box {
  margin-right: 10px;
}
.logo {
  margin-right: -5px;
}

Spécifications

Spécification
CSS Box Model Module Level 3 # margin-physical

Compatibilité des navigateurs

Voir aussi

Les propriétés margin-top, margin-bottom et margin-left
La propriété raccourcie margin
Les propriétés margin-block-start, margin-block-end, margin-inline-start et margin-inline-end
Les propriétés raccourcies margin-block et margin-inline
Le module du modèle de boîte CSS

Aider à améliorer MDN

Apprendre à contribuer

Cette page a été modifiée le 14 oct. 2026 par les contributeur·ice·s du MDN.

Voir cette page sur GitHub • Signaler un problème avec ce contenu

Propriété CSS margin-right

Aider à améliorer MDN

Propriété CSS `margin-right`