diff options
Diffstat (limited to 'files/fr/web/css/margin/index.md')
| -rw-r--r-- | files/fr/web/css/margin/index.md | 181 |
1 files changed, 77 insertions, 104 deletions
diff --git a/files/fr/web/css/margin/index.md b/files/fr/web/css/margin/index.md index 16beec5c1d..0838c9d3da 100644 --- a/files/fr/web/css/margin/index.md +++ b/files/fr/web/css/margin/index.md @@ -8,23 +8,22 @@ tags: translation_of: Web/CSS/margin translation_of_original: Web/CSS/margin-new --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p>La propriété <strong><code>margin</code></strong> définit la taille des marges sur les quatre côtés de l'élément. C'est une propriété raccourcie qui permet de manipuler les autres propriétés de marges : {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} et {{cssxref("margin-left")}}.</p> +La propriété **`margin`** définit la taille des marges sur les quatre côtés de l'élément. C'est une propriété raccourcie qui permet de manipuler les autres propriétés de marges : {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} et {{cssxref("margin-left")}}. -<p>Il est possible d'utiliser des valeurs négatives pour chacun des côtés.</p> +Il est possible d'utiliser des valeurs négatives pour chacun des côtés. -<div>{{EmbedInteractiveExample("pages/css/margin.html")}}</div> +{{EmbedInteractiveExample("pages/css/margin.html")}} -<p>Les marges haute et basse n'ont aucun effet sur les élements en ligne (<em>inline</em>) qui ne sont pas <a href="/fr/docs/Web/CSS/%C3%89l%C3%A9ment_remplac%C3%A9">remplacés</a> (par exemple les {{HTMLElement("span")}} ou {{HTMLElement("code")}}).</p> +Les marges haute et basse n'ont aucun effet sur les élements en ligne (_inline_) qui ne sont pas [remplacés](/fr/docs/Web/CSS/%C3%89l%C3%A9ment_remplac%C3%A9) (par exemple les {{HTMLElement("span")}} ou {{HTMLElement("code")}}). -<div class="note"> -<p><strong>Note :</strong> Les marges créent un espace supplémentaire à l'extérieur de l'élément. Le <em>« remplissage »</em> ({{cssxref("padding")}}) permet quant à lui de créer un espace supplémentaire à l'intérieur de l'élément.</p> -</div> +> **Note :** Les marges créent un espace supplémentaire à l'extérieur de l'élément. Le _« remplissage »_ ({{cssxref("padding")}}) permet quant à lui de créer un espace supplémentaire à l'intérieur de l'élément. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="brush:css">/* La propriété s'applique aux quatre côtés */ +```css +/* La propriété s'applique aux quatre côtés */ margin: 1em; /* vertical | horizontal */ @@ -40,41 +39,38 @@ margin: 2px 1em 0 auto; margin: inherit; margin: initial; margin: unset; -</pre> +``` -<p>La propriété <code>margin</code> peut être définie grâce à une, deux, trois ou quatre valeurs. Chaque valeur est une valeur de type {{cssxref("<length>")}} ou de type {{cssxref("<percentage>")}} ou est le mot-clé <code><a href="#auto">auto</a></code>. Les valeurs négatives permette de dessiner l'élément plus près de ses voisins que ne l'aurait permis la valeur par défaut.</p> +La propriété `margin` peut être définie grâce à une, deux, trois ou quatre valeurs. Chaque valeur est une valeur de type {{cssxref("<length>")}} ou de type {{cssxref("<percentage>")}} ou est le mot-clé [`auto`](#auto). Les valeurs négatives permette de dessiner l'élément plus près de ses voisins que ne l'aurait permis la valeur par défaut. -<ul> - <li>Avec <strong>une</strong> valeur, celle-ci définira la marge pour les quatre côtés de la boîte</li> - <li>Avec <strong>deux</strong> valeurs, la première s'appliquera aux côtés haut et bas et la seconde aux côtés gauche et droit</li> - <li>Avec <strong>trois</strong> valeurs, la première s'appliquera au côté haut, la deuxième aux côtés gauche et droit et la troisième au côté bas</li> - <li>Avec <strong>quatre</strong> valeurs, la première s'appliquera en haut, la deuxième à droite, la troisième en bas et la quatrième à gauche (ce qui correspond au sens des aiguilles d'une montre - c'est plus facile à mémoriser).</li> -</ul> +- Avec **une** valeur, celle-ci définira la marge pour les quatre côtés de la boîte +- Avec **deux** valeurs, la première s'appliquera aux côtés haut et bas et la seconde aux côtés gauche et droit +- Avec **trois** valeurs, la première s'appliquera au côté haut, la deuxième aux côtés gauche et droit et la troisième au côté bas +- Avec **quatre** valeurs, la première s'appliquera en haut, la deuxième à droite, la troisième en bas et la quatrième à gauche (ce qui correspond au sens des aiguilles d'une montre - c'est plus facile à mémoriser). -<h3 id="Valeurs">Valeurs</h3> +### Valeurs -<p>Cette propriété peut accepter une, deux, trois ou quatre valeurs avec les types suivants :</p> +Cette propriété peut accepter une, deux, trois ou quatre valeurs avec les types suivants : -<dl> - <dt><code><length></code></dt> - <dd>La marge est définie avec une valeur absolue. On peut utiliser des valeurs négatives. Pour les différentes unités possibles, voir la page {{cssxref("<length>")}}.</dd> - <dt><code><percentage></code></dt> - <dd>Une valeur relative, exprimée en pourcentage (type {{cssxref("<percentage>")}}, à la <strong>largeur</strong> du bloc englobant. On peut utiliser des valeurs négatives.</dd> - <dt><code>auto</code></dt> - <dd><code>auto </code>est remplacé par une valeur adaptée (il peut être utilisé pour centrer les blocs, par exemple, <code>div { width:50%; margin:0 auto; }</code> permet de centrer un conteneur <code>div</code> horizontalement).</dd> -</dl> +- `<length>` + - : La marge est définie avec une valeur absolue. On peut utiliser des valeurs négatives. Pour les différentes unités possibles, voir la page {{cssxref("<length>")}}. +- `<percentage>` + - : Une valeur relative, exprimée en pourcentage (type {{cssxref("<percentage>")}}, à la **largeur** du bloc englobant. On peut utiliser des valeurs négatives. +- `auto` + - : `auto `est remplacé par une valeur adaptée (il peut être utilisé pour centrer les blocs, par exemple, `div { width:50%; margin:0 auto; }` permet de centrer un conteneur `div` horizontalement). -<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> +### Syntaxe formelle {{csssyntax}} -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Exemple_simple">Exemple simple</h3> +### Exemple simple -<h4 id="CSS">CSS</h4> +#### CSS -<pre class="brush: css; highlight:[2,7]">.ex1 { +```css +.ex1 { margin: auto; background: gold; width: 66%; @@ -83,28 +79,32 @@ margin: unset; margin: 20px 0px 0 -20px; background: gold; width: 66%; -}</pre> +} +``` -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html"><div class="ex1"> +```html +<div class="ex1"> margin: auto; background: gold; width: 66%; -</div> -<div class="ex2"> +</div> +<div class="ex2"> margin: 20px 0px 0px -20px; background: gold; width: 66%; -</div></pre> +</div> +``` -<h4 id="Résultat">Résultat</h4> +#### Résultat -<p>{{EmbedLiveSample('Exemple_simple')}}</p> +{{EmbedLiveSample('Exemple_simple')}} -<h3 id="Autres_exemples">Autres exemples</h3> +### Autres exemples -<pre class="brush: css">margin: 5%; /* tous les côtés avec une marge de 5% */ +```css +margin: 5%; /* tous les côtés avec une marge de 5% */ margin: 10px; /* tous les côtés avec une marge de 10px */ margin: 1.6em 20px; /* haut et bas à 1.6em */ @@ -121,64 +121,37 @@ margin: 1em auto; /* marge de 1em en haut et en bas */ margin: auto; /* boîte centrée horizontalement */ /* marge nulle en haut et en bas */ -</pre> - -<h2 id="Notes">Notes</h2> - -<h3 id="Centrer_horizontalement">Centrer horizontalement</h3> - -<p>Afin de centrer un élément horizontalement, avec un navigateur « moderne » on peut utiliser {{cssxref("display")}}<code>: flex; </code>{{cssxref("justify-content")}}<code>: center;</code>.</p> - -<p>Les anciens navigateurs comme IE8-9 ne gèrent pas ces valeurs. Aussi, il faudra utiliser <code>margin: 0 auto </code>pour centrer un élément au sein de son parent.</p> - -<h3 id="Fusion_des_marges">Fusion des marges</h3> - -<p>Les marges haute et basse des éléments sont parfois fusionnées en une seule marge qui est égale à la plus grande des deux marges. Pour plus d'informations, lire <a href="/fr/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">l'article sur la fusion des marges</a>.</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', '#margin', 'margin')}}</td> - <td>{{Spec2('CSS3 Box')}}</td> - <td>Aucun changement significatif.</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'margin')}}</td> - <td>{{Spec2('CSS3 Transitions')}}</td> - <td><code>margin</code> peut désormais être animée.</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'box.html#margin-properties', 'margin')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>Retrait de l'effet sur les éléments en ligne (<em>inline</em>).</td> - </tr> - <tr> - <td>{{SpecName('CSS1', '#margin', 'margin')}}</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")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">Fusion des marges</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">Le modèle de boîte CSS</a></li> - <li>{{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} et {{cssxref("margin-left")}}</li> -</ul> +``` + +## Notes + +### Centrer horizontalement + +Afin de centrer un élément horizontalement, avec un navigateur « moderne » on peut utiliser {{cssxref("display")}}`: flex; `{{cssxref("justify-content")}}`: center;`. + +Les anciens navigateurs comme IE8-9 ne gèrent pas ces valeurs. Aussi, il faudra utiliser `margin: 0 auto `pour centrer un élément au sein de son parent. + +### Fusion des marges + +Les marges haute et basse des éléments sont parfois fusionnées en une seule marge qui est égale à la plus grande des deux marges. Pour plus d'informations, lire [l'article sur la fusion des marges](/fr/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing). + +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------ | ---------------------------------------- | -------------------------------------------------------- | +| {{SpecName('CSS3 Box', '#margin', 'margin')}} | {{Spec2('CSS3 Box')}} | Aucun changement significatif. | +| {{SpecName('CSS3 Transitions', '#animatable-css', 'margin')}} | {{Spec2('CSS3 Transitions')}} | `margin` peut désormais être animée. | +| {{SpecName('CSS2.1', 'box.html#margin-properties', 'margin')}} | {{Spec2('CSS2.1')}} | Retrait de l'effet sur les éléments en ligne (_inline_). | +| {{SpecName('CSS1', '#margin', 'margin')}} | {{Spec2('CSS1')}} | Définition initiale. | + +{{cssinfo}} + +## Compatibilité des navigateurs + +{{Compat("css.properties.margin")}} + +## Voir aussi + +- [Fusion des marges](/fr/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing) +- [Le modèle de boîte CSS](/en-US/docs/Learn/CSS/Building_blocks/The_box_model) +- {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} et {{cssxref("margin-left")}} |