aboutsummaryrefslogtreecommitdiff
path: root/files/fr/web/css/margin-right
diff options
context:
space:
mode:
Diffstat (limited to 'files/fr/web/css/margin-right')
-rw-r--r--files/fr/web/css/margin-right/index.md289
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 &lt;length&gt; */
+```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>&lt;length&gt;</code>) ou un pourcentage (<code>&lt;percentage&gt;</code>).</p>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>&lt;length&gt;</code></dt>
- <dd>Une valeur fixe, du type {{cssxref("&lt;length&gt;")}} : 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>&lt;percentage&gt;</code></dt>
- <dd>Une valeur exprimée en pourcentage (type {{cssxref("&lt;percentage&gt;")}} 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("&lt;length&gt;")}} : 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("&lt;percentage&gt;")}} 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">&lt;p&gt;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.
-&lt;/p&gt;
-&lt;p class=exemple&gt;
+</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. »
-&lt;/p&gt;
-&lt;p&gt;
+</p>
+<p>
« Ce n’est pas de ma faute, » dit Cinq d’un ton
bourru, « c’est Sept qui m’a poussé le coude. »
-&lt;/p&gt;</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")}}