margin-right

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

La propriété margin-right d'un élément définit l'espace horizontal à droite qui formera la marge à droite. On peut avoir une marge droite négative.

Exemple interactif

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.

Syntaxe

css

/* Valeur de longueur */
/* 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 */

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

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

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

Valeurs

<length>

Une valeur fixe, du type <length> : elle peut être exprimée en pixels (px) ou en fonction de la taille du texte (em) ou être relative à la taille de la zone d'affichage (viewport) (vh).

<percentage>

Une valeur exprimée en pourcentage (type <percentage> relative à la largeur du bloc englobant.

auto

Un mot-clé qui indique que la marge droite s'adapte à l'espace restant. Cet espace est principalement défini par le mode de disposition utilisé.L'espace calculé sera réparti de façon équitable entre la marge droite et la marge gauche si celle-ci vaut également auto. Le tableau suivant précise 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 ligne
`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.
ni'mporte 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 sera 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 sera 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 spécifié 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

CSS

css

.exemple {
  margin-right: 50%;
}

HTML

html

<p>
  Un grand rosier se trouvait à l’entrée du jardin ; les roses qu’il portait
  étaient blanches, mais trois jardiniers étaient en train de les peindre en
  rouge.
</p>
<p class="exemple">
  Alice s’avança pour les regarder, et, au moment où elle approchait, elle en
  entendit un qui disait&nbsp;: «&nbsp;Fais donc attention, Cinq, et ne
  m’éclabousse pas ainsi avec ta peinture.&nbsp;»
</p>
<p>
  «&nbsp;Ce n’est pas de ma faute,&nbsp;» dit Cinq d’un ton bourru, «&nbsp;c’est
  Sept qui m’a poussé le coude.&nbsp;»
</p>

Résultat

Spécifications

Specification
CSS Box Model Module Level 3 # margin-physical

Compatibilité des navigateurs

BCD tables only load in the browser