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.
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.
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 |
Média | visuel |
Valeur calculée | le pourcentage tel que spécifé ou une longeur absolue |
Animable | oui, comme une longueur |
Ordre canonique | l'ordre unique et non-ambigu défini par la grammaire formelle |
Syntaxe
/* 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;
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
ourelative
0
Disposition en ligne block
,inline
,inline-block
,block
,table
,inline-table
,list-item
,table-caption
n'importe laquelle static
ourelative
0
sauf simargin-left
etmargin-right
valentauto
. 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
ouright
static
ourelative
0
Disposition en bloc avec les éléments flottants n'importe quelle table-*
sauftable-caption
n'importe laquelle n'importe laquelle 0
Les éléments table-*
n'ont pas de marge, il faut utiliserborder-spacing
à la place.ni'mporte quelle autre sauf flex
,inline-flex
outable-*
n'importe laquelle fixed
ouabsolute
0
sauf simargin-left
etmargin-right
valentauto
. 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 avecauto
.Boîtes flexibles.
Syntaxe formelle
<length> | <percentage> | auto
Exemples
CSS
.exemple { margin-right: 50%; }
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 : « Fais donc attention, Cinq, et ne m’éclabousse pas ainsi avec ta peinture. » </p> <p> « Ce n’est pas de ma faute, » dit Cinq d’un ton bourru, « c’est Sept qui m’a poussé le coude. » </p>
Résultat
Spécifications
Spécification | État | Commentaires |
---|---|---|
CSS Basic Box Model La définition de 'margin-right' dans cette spécification. |
Version de travail | Pas de changement significatif. |
CSS Transitions La définition de 'margin-right' dans cette spécification. |
Version de travail | margin-right peut désormais être animée. |
CSS Flexible Box Layout Module La définition de 'margin-right' dans cette spécification. |
Candidat au statut de recommandation | Le comportement de margin-right est défini sur les éléments flexibles. |
CSS Level 2 (Revision 1) La définition de 'margin-right' dans cette spécification. |
Recommendation | L'effet sur les éléments en ligne (inline) est retiré. |
CSS Level 1 La définition de 'margin-right' dans cette spécification. |
Recommendation | Définition initiale |
Compatibilité des navigateurs
Fonctionnalité | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Support simple | 1.0 | 1.0 (1.7 ou moins) | 3.0 | 3.5 | 1.0 (85) |
auto |
1.0 | 1.0 (1.7 ou moins) | 6.0 (strict mode) | 3.5 | 1.0 (85) |
Fonctionnalité | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Support simple | 1.0 | 1.0 (1) | 6.0 | 6.0 | 1.0 |