diff options
Diffstat (limited to 'files/fr/web/css/margin-right')
-rw-r--r-- | files/fr/web/css/margin-right/index.md | 289 |
1 files changed, 150 insertions, 139 deletions
diff --git a/files/fr/web/css/margin-right/index.md b/files/fr/web/css/margin-right/index.md index cf82405f56..7bf9c09f0e 100644 --- a/files/fr/web/css/margin-right/index.md +++ b/files/fr/web/css/margin-right/index.md @@ -7,18 +7,19 @@ tags: - Reference translation_of: Web/CSS/margin-right --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p>La propriété <strong><code>margin-right</code></strong> d'un élément définit l'espace horizontal à droite qui formera la marge à droite. On peut avoir une marge droite négative.</p> +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. -<div>{{EmbedInteractiveExample("pages/css/margin-right.html")}}</div> +{{EmbedInteractiveExample("pages/css/margin-right.html")}} -<p>Les marges des côtés droit et gauche de deux boîtes adjacentes peuvent fusionner entre elles. C'est ce qu'on appelle <a href="/fr/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing"><em>la fusion de marges</em></a>.</p> +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_](/fr/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing). -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="brush:css no-line-numbers">/* Valeur de longueur */ -/* Type <length> */ +```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 @@ -31,152 +32,162 @@ margin-right: auto; margin-right: inherit; margin-right: initial; margin-right: unset; -</pre> - -<p>La valeur de cette propriété peut être le mot-clé <code>auto</code>, une longueur (<code><length></code>) ou un pourcentage (<code><percentage></code>).</p> - -<h3 id="Valeurs">Valeurs</h3> - -<dl> - <dt><code><length></code></dt> - <dd>Une valeur fixe, du type {{cssxref("<length>")}} : elle peut être exprimée en pixels (<code>px</code>) ou en fonction de la taille du texte (<code>em</code>) ou être relative à la taille de la zone d'affichage (<em>viewport</em>) (<code>vh</code>).</dd> - <dt><code><percentage></code></dt> - <dd>Une valeur exprimée en pourcentage (type {{cssxref("<percentage>")}} relative à la largeur du bloc englobant.</dd> - <dt><code>auto</code></dt> - <dd>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 <code>auto</code>. Le tableau suivant précise les différents cas : - <table class="standard-table"> - <thead> - <tr> - <th scope="col">Valeur de {{cssxref("display")}}</th> - <th scope="col">Valeur de {{cssxref("float")}}</th> - <th scope="col">Valeur de {{cssxref("position")}}</th> - <th scope="col">Valeur calculée pour <code>auto</code></th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <th><code>inline</code>, <code>inline-block</code>, <code>inline-table</code></th> - <th><em>n'importe laquelle</em></th> - <th><code>static</code> ou <code>relative</code></th> - <td><code>0</code></td> - <td>Disposition en ligne</td> - </tr> - <tr> - <th><code>block</code>, <code>inline</code>, <code>inline-block</code>, <code>block</code>, <code>table</code>, <code>inline-table</code>, <code>list-item</code>, <code>table-caption</code></th> - <th><em>n'importe laquelle</em></th> - <th><code>static</code> ou <code>relative</code></th> - <td><code>0</code> sauf si <code>margin-left</code> et <code>margin-right</code> valent <code>auto</code>. Dans ce cas, la valeur utilisée sera celle qui permet de centrer l'élément au sein de l'élément parent.</td> - <td>Disposition en bloc</td> - </tr> - <tr> - <th><code>block</code>, <code>inline</code>, <code>inline-block</code>, <code>block</code>, <code>table</code>, <code>inline-table</code>, <code>list-item</code>, <code>table-caption</code></th> - <th><code>left</code> ou <code>right</code></th> - <th><code>static</code> ou <code>relative</code></th> - <td><code>0</code></td> - <td>Disposition en bloc avec les éléments flottants</td> - </tr> - <tr> - <th><em>n'importe quelle </em><code>table-*</code><em> sauf </em><code>table-caption</code></th> - <th><em>n'importe laquelle</em></th> - <th><em>n'importe laquelle</em></th> - <td><code>0</code></td> - <td>Les éléments <code>table-*</code> n'ont pas de marge, il faut utiliser {{cssxref("border-spacing")}} à la place.</td> - </tr> - <tr> - <th><em>ni'mporte quelle autre sauf <code>flex</code>,</em> <code>inline-flex</code><em> ou </em><code>table-*</code></th> - <th><em>n'importe laquelle</em></th> - <th><em><code>fixed</code></em> ou <code>absolute</code></th> - <td><code>0</code> sauf si <code>margin-left</code> et <code>margin-right</code> valent <code>auto</code>. 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.</td> - <td>Positionnement absolu.</td> - </tr> - <tr> - <th><code>flex</code>, <code>inline-flex</code></th> - <th><em>n'importe laquelle</em></th> - <th><em>n'importe laquelle</em></th> - <td><code>0</code>, 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 <code>auto</code>.</td> - <td>Boîtes flexibles.</td> - </tr> - </tbody> - </table> - </dd> -</dl> - -<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> +``` + +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 : + + <table class="standard-table"> + <thead> + <tr> + <th scope="col">Valeur de {{cssxref("display")}}</th> + <th scope="col">Valeur de {{cssxref("float")}}</th> + <th scope="col">Valeur de {{cssxref("position")}}</th> + <th scope="col">Valeur calculée pour <code>auto</code></th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <th> + <code>inline</code>, <code>inline-block</code>, + <code>inline-table</code> + </th> + <th><em>n'importe laquelle</em></th> + <th><code>static</code> ou <code>relative</code></th> + <td><code>0</code></td> + <td>Disposition en ligne</td> + </tr> + <tr> + <th> + <code>block</code>, <code>inline</code>, <code>inline-block</code>, + <code>block</code>, <code>table</code>, <code>inline-table</code>, + <code>list-item</code>, <code>table-caption</code> + </th> + <th><em>n'importe laquelle</em></th> + <th><code>static</code> ou <code>relative</code></th> + <td> + <code>0</code> sauf si <code>margin-left</code> et + <code>margin-right</code> valent <code>auto</code>. Dans ce cas, la + valeur utilisée sera celle qui permet de centrer l'élément au sein de + l'élément parent. + </td> + <td>Disposition en bloc</td> + </tr> + <tr> + <th> + <code>block</code>, <code>inline</code>, <code>inline-block</code>, + <code>block</code>, <code>table</code>, <code>inline-table</code>, + <code>list-item</code>, <code>table-caption</code> + </th> + <th><code>left</code> ou <code>right</code></th> + <th><code>static</code> ou <code>relative</code></th> + <td><code>0</code></td> + <td>Disposition en bloc avec les éléments flottants</td> + </tr> + <tr> + <th> + <em>n'importe quelle </em><code>table-*</code><em> sauf </em + ><code>table-caption</code> + </th> + <th><em>n'importe laquelle</em></th> + <th><em>n'importe laquelle</em></th> + <td><code>0</code></td> + <td> + Les éléments <code>table-*</code> n'ont pas de marge, il faut utiliser + {{cssxref("border-spacing")}} à la place. + </td> + </tr> + <tr> + <th> + <em>ni'mporte quelle autre sauf <code>flex</code>,</em> + <code>inline-flex</code><em> ou </em><code>table-*</code> + </th> + <th><em>n'importe laquelle</em></th> + <th> + <em><code>fixed</code></em> ou <code>absolute</code> + </th> + <td> + <code>0</code> sauf si <code>margin-left</code> et + <code>margin-right</code> valent <code>auto</code>. 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. + </td> + <td>Positionnement absolu.</td> + </tr> + <tr> + <th><code>flex</code>, <code>inline-flex</code></th> + <th><em>n'importe laquelle</em></th> + <th><em>n'importe laquelle</em></th> + <td> + <code>0</code>, 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 <code>auto</code>. + </td> + <td>Boîtes flexibles.</td> + </tr> + </tbody> + </table> + +### Syntaxe formelle {{csssyntax}} -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="CSS">CSS</h3> +### CSS -<pre class="brush: css">.exemple { +```css +.exemple { margin-right: 50%; -}</pre> +} +``` -<h3 id="HTML">HTML</h3> +### HTML -<pre class="brush: html"><p>Un grand rosier se trouvait à l’entrée du jardin ; +```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> +</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> +</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></pre> - -<h3 id="Résultat">Résultat</h3> - -<p>{{EmbedLiveSample("Exemples")}}</p> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Box', '#the-margin', 'margin-right')}}</td> - <td>{{Spec2('CSS3 Box')}}</td> - <td>Pas de changement significatif.</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'margin-right')}}</td> - <td>{{Spec2('CSS3 Transitions')}}</td> - <td><code>margin-right</code> peut désormais être animée.</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Flexbox', '#item-margins', 'margin-right')}}</td> - <td>{{Spec2('CSS3 Flexbox')}}</td> - <td>Le comportement de <code>margin-right</code> est défini sur les éléments flexibles.</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'box.html#margin-properties', 'margin-right')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>L'effet sur les éléments en ligne (<em>inline</em>) est retiré.</td> - </tr> - <tr> - <td>{{SpecName('CSS1', '#margin-right', 'margin-right')}}</td> - <td>{{Spec2('CSS1')}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("css.properties.margin-right")}}</p> +</p> +``` + +### Résultat + +{{EmbedLiveSample("Exemples")}} + +## Spécifications + +| Spécification | État | Commentaires | +| -------------------------------------------------------------------------------------------- | ---------------------------------------- | ------------------------------------------------------------------------ | +| {{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")}} |