W3docs
fr
Se connecter

Propriété CSS margin-right

Utilisez cette propriété pour définir l'espace de marge à droite d'un élément. Découvrez les valeurs et des exemples.

La propriété CSS margin-right définit la largeur de la zone de marge à droite d'un élément — l'espace transparent entre la bordure droite de l'élément et le contenu adjacent ou le bloc conteneur.

C'est l'une des quatre propriétés de marge individuelles — aux côtés de margin-top, margin-bottom et margin-left — que le raccourci margin définit toutes en même temps. Utilisez margin-right lorsque vous souhaitez uniquement ajuster l'espace à droite, par exemple pour séparer une icône en ligne du texte qui la suit, ou pour éloigner un élément flottant du contenu adjacent.

Cette page couvre la syntaxe de la propriété, chaque valeur acceptée (y compris auto, % et les longueurs négatives), ainsi que les règles à connaître avant de l'utiliser.

Info

Les valeurs négatives sont autorisées. Une valeur négative de margin-right rapproche le contenu suivant (ou le fait se chevaucher), ce qui peut parfois être utile pour des effets de superposition, mais peut également provoquer des surprises dans la mise en page.

Valeur initiale0
S'applique àTous les éléments. S'applique également à ::first-letter.
HéritéNon.
AnimableOui. La marge droite de l'élément est animable.
VersionCSS2
Syntaxe DOMobject.style.marginRight = "50px";

Syntaxe

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

Exemples

Une longueur fixe en pixels

Le cas le plus simple : réserver une quantité d'espace fixe à droite. Ici, le paragraphe conserve un espace de 400px sur son côté droit, de sorte qu'il ne s'étend plus sur toute la largeur du conteneur.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .right {
        margin-right: 400px;
      }
    </style>
  </head>
  <body>
    <h2>Margin-right property example</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <p class="right">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  </body>
</html>
Essayez vous-même »

Résultat

Un paragraphe avec une marge droite de 400px affiché plus étroit que le texte environnant

Une valeur en pourcentage

Lorsque la valeur est un pourcentage, elle est calculée par rapport à la largeur du bloc conteneur — et non à la largeur propre de l'élément. Ainsi, margin-right: 50% laisse un espace égal à la moitié de la largeur de contenu du parent.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .right {
        margin-right: 50%;
      }
    </style>
  </head>
  <body>
    <h2>Margin-right property example</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <p class="right">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  </body>
</html>
Essayez vous-même »

La valeur auto

Pour un élément de niveau bloc, margin-right: auto permet au navigateur de remplir l'espace disponible à droite. Seul, son effet visible est limité, mais combiné avec margin-left: auto, c'est l'astuce classique pour centrer horizontalement un bloc à largeur fixe. En définissant uniquement margin-right: auto (avec margin-left: 0), on pousse le bloc vers le bord gauche.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .right {
        margin-right: auto;
      }
    </style>
  </head>
  <body>
    <h2>Margin-right property example</h2>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </p>
    <p class="right">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </p>
  </body>
</html>
Essayez vous-même »

Valeurs

ValeurDescriptionEssayer
autoDéfinit la marge droite. C'est la valeur par défaut de cette propriété.Essayer »
lengthDéfinit une marge droite en px, pt, cm, etc. La valeur par défaut est 0.Essayer »
%Définit la marge droite en % de l'élément conteneur.Essayer »
initialAttribue à la propriété sa valeur par défaut.Essayer »
inheritHérite de la propriété depuis l'élément parent.

Points importants

  • Les marges sont transparentes. Contrairement au padding, la marge se situe à l'extérieur de la bordure et n'affiche jamais la couleur d'arrière-plan de l'élément.
  • Les marges droites ne fusionnent pas. La fusion des marges ne se produit qu'entre des marges verticales adjacentes (margin-top / margin-bottom). Les marges horizontales comme margin-right s'additionnent toujours.
  • Les pourcentages font référence à la largeur. Une valeur en % est résolue par rapport à la largeur du bloc conteneur, même si elle contrôle l'espace horizontal.
  • Alternative avec le raccourci. Si vous définissez plusieurs côtés à la fois, le raccourci margin est plus court : margin: 0 400px 0 0 est équivalent à margin-right: 400px avec des zéros pour les autres côtés.

Exercice

Pratique
Que fait la propriété CSS 'margin-right' ?
Que fait la propriété CSS 'margin-right' ?
Was this page helpful?