margin

  • Raccourci de la révision : CSS/margin
  • Titre de la révision : margin
  • ID de la révision : 70619
  • Créé :
  • Créateur : the prisoner
  • Version actuelle ? Non
  • Commentaire 3 words added, 5 words removed

Contenu de la révision

{{ CSSRef() }}

Résumé

La propriété CSS margin définit la marge extérieure d'un élément pour les quatre côtés. C'est un raccourci pour éviter de régler chaque côté séparément avec les autres propriétés de marge ({{ Cssxref("margin-top") }}, {{ Cssxref("margin-right") }}, {{ Cssxref("margin-bottom") }} et {{ Cssxref("margin-left") }}).

  • {{ Cssxref("Valeur initiale") }} : 0
  • S'applique à : tous les éléments sauf ceux avec des types d'affichage de table autres que table-caption, table et inline-table
  • {{ Cssxref("Héritage") }} : non
  • Pourcentages : toujours se référer à la largeur du bloc contenant
  • Média : Visuel
  • {{ Cssxref("Valeur calculée") }} : le pourcentage spécifié ou la longueur absolue

Syntaxe

margin: [ <longueur> | <pourcentage> ] {1,4} | inherit | auto;

Valeurs

Une, deux, trois ou quatre valeurs sont acceptées, les valeurs négatives sont autorisées.

<longueur>
Spécifie une valeur fixe. Pour les unités, voir {{ Xref_csslength() }}.
<pourcentage>
Spécifie un pourcentage.
auto
Une valeur est automatiquement calculée, on peut par exemple l'utiliser pour le centrage des blocs.
  • Une seule valeur : elle s'applique aux quatre côtés.
  • Deux valeurs : la première s'applique pour le haut et le bas, la seconde pour la gauche et la droite.
  • Trois valeurs : la première s'applique pour le haut, la seconde pour la gauche et la droite et la troisième pour le bas.
  • Quatre valeurs : elles s'appliquent respectivement pour le haut, la droite, le bas et la gauche.

Exemple

margin: 5%;                /* tout les côtés ont une marge de 5% */

margin: 10px;              /* tout les côtés ont une marge de 10px */

margin: 1.6em 20px;        /* le haut et le bas ont une marge de 1.6em et la gauche et la droite de 20px */

margin: 10px 3% 1em;       /* le haut a une marge de 10px, la gauche et la droite de 3% et le bas de 1em */

margin: 10px 3px 30px 5px; /* le haut a une marge de 10px, la droite de 3px, le bas de 30px et la gauche de 5px */

margin: 1em auto;          /* la marge pour le haut et le bas est de 1em et le bloc est centré horizontalement */

margin: auto;              /* le bloc est centré horizontalement, la marge pour le haut et le bas est de 0 */
margin: auto;
background: gold;
width: 600px;
margin: -1em 0 100px -40px;
background: plum;
width: 20em

Compatibilité des navigateurs

Fonction Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Support de base  1.0 1.0 (1.0) 3.0 3.5 1.0 (85)
Valeur auto  1.0 1.0 (1.0) 6.0 (strict mode) 3.5 1.0 (85)

Spécifications

Voir également

{{ Cssxref("margin-bottom") }} ; {{ Cssxref("margin-left") }} ; {{ Cssxref("margin-right") }} ; {{ Cssxref("margin-top") }}

{{ languages( { "de": "de/CSS/margin", "en": "en/CSS/margin", "ja": "ja/CSS/margin" } ) }}

Source de la révision

<p>{{ CSSRef() }}</p>
<h3 id="Résumé">Résumé</h3>
<p>La propriété CSS <code>margin</code> définit la marge extérieure d'un élément pour les quatre côtés. C'est un raccourci pour éviter de régler chaque côté séparément avec les autres propriétés de marge ({{ Cssxref("<code>margin-top</code>") }}, {{ Cssxref("<code>margin-right</code>") }}, {{ Cssxref("<code>margin-bottom</code>") }} et {{ Cssxref("<code>margin-left</code>") }}).</p>
<ul> <li>{{ Cssxref("Valeur initiale") }} : 0</li> <li>S'applique à : tous les éléments sauf ceux avec des types d'affichage de table autres que <code>table-caption</code>, <code>table</code> et <code>inline-table</code></li> <li>{{ Cssxref("Héritage") }} : non</li> <li>Pourcentages : toujours se référer à la largeur du bloc contenant</li> <li>Média : <a href="/fr/CSS/Média/Visuel" title="https://developer.mozilla.org/fr/CSS/M%C3%A9dia/Visuel">Visuel</a></li> <li>{{ Cssxref("Valeur calculée") }} : le pourcentage spécifié ou la longueur absolue</li>
</ul>
<h3 id="Syntaxe">Syntaxe</h3>
<pre>margin: [ <a href="https://developer.mozilla.org/fr/CSS/longueur" title="https://developer.mozilla.org/fr/CSS/longueur">&lt;longueur&gt;</a> | <a href="https://developer.mozilla.org/fr/CSS/pourcentage" title="https://developer.mozilla.org/fr/CSS/pourcentage">&lt;pourcentage&gt;</a> ] {1,4} | <a href="https://developer.mozilla.org/fr/CSS/inherit" title="https://developer.mozilla.org/fr/CSS/inherit">inherit</a> | <a href="https://developer.mozilla.org/fr/CSS/auto" title="auto">auto</a>;
</pre>
<h3 id="Valeurs">Valeurs</h3>
<p>Une, deux, trois ou quatre valeurs sont acceptées, les valeurs négatives sont autorisées.</p>
<dl> <dt>&lt;longueur&gt;</dt> <dd>Spécifie une valeur fixe. Pour les unités, voir {{ Xref_csslength() }}.</dd> <dt>&lt;pourcentage&gt;</dt> <dd>Spécifie un pourcentage.</dd> <dt>auto</dt> <dd>Une valeur est automatiquement calculée, on peut par exemple l'utiliser pour le centrage des blocs.</dd>
</dl>
<ul> <li><strong>Une</strong> seule valeur : elle s'applique aux <strong>quatre côtés</strong>.</li> <li><strong>Deux</strong> valeurs : la première s'applique pour le <strong>haut et le bas</strong>, la seconde pour la <strong>gauche et la droite</strong>.</li> <li><strong>Trois</strong> valeurs : la première s'applique pour le <strong>haut</strong>, la seconde pour la <strong>gauche et la droite</strong> et la troisième pour le <strong>bas</strong>.</li> <li><strong>Quatre</strong> valeurs : elles s'appliquent respectivement pour le <strong>haut</strong>, la <strong>droite</strong>, le <strong>bas</strong> et la <strong>gauche</strong>.</li>
</ul>
<h3 id="Exemple">Exemple</h3>
<pre>margin: 5%;                /* tout les côtés ont une marge de 5% */

margin: 10px;              /* tout les côtés ont une marge de 10px */

margin: 1.6em 20px;        /* le haut et le bas ont une marge de 1.6em et la gauche et la droite de 20px */

margin: 10px 3% 1em;       /* le haut a une marge de 10px, la gauche et la droite de 3% et le bas de 1em */

margin: 10px 3px 30px 5px; /* le haut a une marge de 10px, la droite de 3px, le bas de 30px et la gauche de 5px */

margin: 1em auto;          /* la marge pour le haut et le bas est de 1em et le bloc est centré horizontalement */

margin: auto;              /* le bloc est centré horizontalement, la marge pour le haut et le bas est de 0 */
</pre>
<pre style="margin:auto; background:gold; width:600px;">margin: auto;
background: gold;
width: 600px;</pre>
<pre style="margin:-1em 0 100px -40px; background:plum; width:20em">margin: -1em 0 100px -40px;
background: plum;
width: 20em</pre>
<h3 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h3>
<div id="compat-desktop"> <table class="compat-table"> <tbody> <tr> <th>Fonction</th> <th>Chrome</th> <th>Firefox (Gecko)</th> <th>Internet Explorer</th> <th>Opera</th> <th>Safari (WebKit)</th> </tr> <tr> <td>Support de base</td> <td> 1.0</td> <td>1.0 (1.0)</td> <td>3.0</td> <td>3.5</td> <td>1.0 (85)</td> </tr> <tr> <td>Valeur <code>auto</code></td> <td> 1.0</td> <td>1.0 (1.0)</td> <td>6.0 (strict mode)</td> <td>3.5</td> <td>1.0 (85)</td> </tr> </tbody> </table>
</div>
<h3 id="Spécifications">Spécifications</h3>
<ul> <li><a class="external" href="http://www.w3.org/TR/CSS1/#margin" title="http://www.w3.org/TR/CSS1/#margin">CSS 1 #margin</a></li> <li><a class="external" href="http://www.w3.org/TR/CSS21/box.html#propdef-margin" title="http://www.w3.org/TR/CSS21/box.html#propdef-margin">CSS 2.1 box #margin</a></li> <li><a class="external" href="http://www.w3.org/TR/css3-box/#margins" title="http://www.w3.org/TR/css3-box/#margins">CSS 3 box #margins</a></li>
</ul>
<h3 id="Voir_également">Voir également</h3>
<p>{{ Cssxref("margin-bottom") }} ; {{ Cssxref("margin-left") }} ; {{ Cssxref("margin-right") }} ; {{ Cssxref("margin-top") }}</p>
<p>{{ languages( { "de": "de/CSS/margin", "en": "en/CSS/margin", "ja": "ja/CSS/margin" } ) }}</p>
Revenir à cette révision