From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/fr/web/css/margin-right/index.html | 186 +++++++++++++++++++++++++++++++ 1 file changed, 186 insertions(+) create mode 100644 files/fr/web/css/margin-right/index.html (limited to 'files/fr/web/css/margin-right') diff --git a/files/fr/web/css/margin-right/index.html b/files/fr/web/css/margin-right/index.html new file mode 100644 index 0000000000..a34a800ead --- /dev/null +++ b/files/fr/web/css/margin-right/index.html @@ -0,0 +1,186 @@ +--- +title: margin-right +slug: Web/CSS/margin-right +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/margin-right +--- +
{{CSSRef}}
+ +

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.

+ +
{{EmbedInteractiveExample("pages/css/margin-right.html")}}
+ + + +

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

+ +
/* 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 {{cssxref("<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 {{cssxref("<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 {{cssxref("display")}}Valeur de {{cssxref("float")}}Valeur de {{cssxref("position")}}Valeur calculée pour autoCommentaires
inline, inline-block, inline-tablen'importe laquellestatic ou relative0Disposition en ligne
block, inline, inline-block, block, table, inline-table, list-item, table-captionn'importe laquellestatic ou relative0 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-captionleft ou rightstatic ou relative0Disposition en bloc avec les éléments flottants
n'importe quelle table-* sauf table-captionn'importe laquellen'importe laquelle0Les éléments table-* n'ont pas de marge, il faut utiliser {{cssxref("border-spacing")}} à la place.
ni'mporte quelle autre sauf flex, inline-flex ou table-*n'importe laquellefixed ou absolute0 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-flexn'importe laquellen'importe laquelle0, 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.
+
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

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

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Box', '#the-margin', 'margin-right')}}{{Spec2('CSS3 Box')}}Pas de changement significatif.
{{SpecName('CSS3 Transitions', '#animatable-css', 'margin-right')}}{{Spec2('CSS3 Transitions')}}margin-right peut désormais être animée.
{{SpecName('CSS3 Flexbox', '#item-margins', 'margin-right')}}{{Spec2('CSS3 Flexbox')}}Le comportement de margin-right est défini sur les éléments flexibles.
{{SpecName('CSS2.1', 'box.html#margin-properties', 'margin-right')}}{{Spec2('CSS2.1')}}L'effet sur les éléments en ligne (inline) est retiré.
{{SpecName('CSS1', '#margin-right', 'margin-right')}}{{Spec2('CSS1')}}Définition initiale
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.margin-right")}}

-- cgit v1.2.3-54-g00ecf