Révision 70760 sur margin-bottom

  • Raccourci de la révision : CSS/margin-bottom
  • Titre de la révision : margin-bottom
  • ID de la révision : 70760
  • Créé :
  • Créateur : the prisoner
  • Version actuelle ? Non
  • Commentaire modification des liens + exemple; 3 words added, 9 words removed
Étiquettes : 

Contenu de la révision

{{ CSSRef() }}

Résumé

La propriété margin-bottom permet de définir une marge extérieure en bas d'un élément.

  • 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
  • Héritée : non
  • Pourcentages : toujours se référer à la largeur du bloc contenant
  • Média : Visuel
  • Valeur calculée : le pourcentage spécifié ou la longueur absolue

Syntaxe

margin-bottom: <longueur> | <pourcentage> | inherit | auto;

Valeurs

Les valeurs négatives sont autorisées.

<longueur>
Spécifie une valeur fixe. Pour les unités, voir <longueur>.
<pourcentage>
Spécifie un pourcentage.
auto
Une valeur est automatiquement calculée.

Exemples

.content { margin-bottom: 5%; }
.sidebox { margin-bottom: 10px; }
.logo    { margin-bottom: -5px; }
#header  { margin-bottom: 1em; }
margin-bottom: 50px;

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

margin ; margin-left ; margin-right ; margin-top

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

Source de la révision

<p>{{ CSSRef() }}</p>
<h3>Résumé</h3>
<p>La propriété <code>margin-bottom</code> permet de définir une marge extérieure en bas d'un élément.</p>
<ul> <li><a href="/fr/CSS/Valeur_initiale" title="Valeur initiale">Valeur initiale</a> : 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><a href="/fr/CSS/Héritage" title="Héritage">Héritée</a> : 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="Visuel">Visuel</a></li> <li><a href="/fr/CSS/Valeur_calculée" title="Valeur calculée">Valeur calculée</a> : le pourcentage spécifié ou la longueur absolue</li>
</ul>
<h3>Syntaxe</h3>
<pre>margin-bottom: <a href="https://developer.mozilla.org/fr/CSS/longueur" title="longueur">&lt;longueur&gt;</a> | <a href="https://developer.mozilla.org/fr/CSS/pourcentage" title="pourcentage">&lt;pourcentage&gt;</a> | <a href="https://developer.mozilla.org/fr/CSS/inherit" title="inherit">inherit</a> | <a href="https://developer.mozilla.org/fr/CSS/auto" title="auto">auto</a>;
</pre>
<h3>Valeurs</h3>
<p>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 <a href="/fr/CSS/longueur" title="longueur">&lt;longueur&gt;</a>.</dd> <dt>&lt;pourcentage&gt;</dt> <dd>Spécifie un pourcentage.</dd> <dt>auto</dt> <dd>Une valeur est automatiquement calculée.</dd>
</dl>
<h3>Exemples</h3>
<pre>.content { margin-bottom: 5%; }
.sidebox { margin-bottom: 10px; }
.logo    { margin-bottom: -5px; }
#header  { margin-bottom: 1em; }
</pre>
<div style="width:164px; border:1px solid black;"> <div style="margin-bottom:50px; background:gold; width:162px; border:1px dotted black;">margin-bottom: 50px;</div>
</div>
<h3>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>Spécifications</h3>
<ul> <li><a class="external" href="http://www.w3.org/TR/CSS1/#margin-bottom" title="http://www.w3.org/TR/CSS1/#margin-bottom">CSS 1 #margin-bottom</a></li> <li><a class="external" href="http://www.w3.org/TR/CSS21/box.html#propdef-margin-bottom" title="http://www.w3.org/TR/CSS21/box.html#propdef-margin-bottom">CSS 2.1 box #margin-bottom</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>Voir également</h3>
<p><a href="/fr/CSS/margin" title="margin">margin</a> ; <a href="/fr/CSS/margin-left" title="margin-left">margin-left</a> ; <a href="/fr/CSS/margin-right" title="margin-right">margin-right</a> ; <a href="/fr/CSS/margin-top" title="margin-top">margin-top</a></p>
<p>{{ languages( { "de": "de/CSS/margin-bottom", "en": "en/CSS/margin-bottom", "ja": "ja/CSS/margin-bottom" } ) }}</p>
Revenir à cette révision