mozilla

Revision 462955 of margin-bottom

  • Raccourci de la révision : CSS/margin-bottom
  • Titre de la révision : margin-bottom
  • ID de la révision : 462955
  • Créé :
  • Créateur : FredB
  • Version actuelle ? Non
  • Commentaire
Étiquettes : 

Contenu de la révision

{{ CSSRef() }}

Résumé

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

{{cssbox("margin-bottom")}}

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 <{{ Cssxref("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: -20px;
background: gold;
width: 200px;
margin-bottom: 2em;
background: gold;
width: 15em;

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") }} ; {{ Cssxref("margin-left") }} ; {{ Cssxref("margin-right") }} ; {{ Cssxref("margin-top") }}

Source de la révision

<p>{{ CSSRef() }}</p>
<h2 id="R.C3.A9sum.C3.A9">Résumé</h2>
<p>La propriété <a href="/fr/docs/CSS" title="/fr/docs/CSS">CSS</a> <code>margin-bottom</code> permet de définir une marge extérieure en bas d'un élément.</p>
<p>{{cssbox("margin-bottom")}}</p>
<h2 id="Syntaxe">Syntaxe</h2>
<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 id="Valeurs">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 &lt;{{ Cssxref("longueur") }}&gt;.</dd>
  <dt>
    &lt;pourcentage&gt;</dt>
  <dd>
    Spécifie un pourcentage.</dd>
  <dt>
    auto</dt>
  <dd>
    Une valeur est automatiquement calculée.</dd>
</dl>
<h2 id="Exemples">Exemples</h2>
<pre>
.content { margin-bottom: 5%; }
.sidebox { margin-bottom: 10px; }
.logo    { margin-bottom: -5px; }
#header  { margin-bottom: 1em; }
</pre>
<pre style="margin-bottom:-20px; background:gold; width:200px;">
margin-bottom: -20px;
background: gold;
width: 200px;
</pre>
<pre style="margin-bottom:2em; background:plum; width:15em;">
margin-bottom: 2em;
background: gold;
width: 15em;
</pre>
<h2 id="Compatibilit.C3.A9_des_navigateurs">Compatibilité des navigateurs</h2>
<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>&nbsp;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>&nbsp;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>
<h2 id="Sp.C3.A9cifications">Spécifications</h2>
<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>
<h2 id="Voir_.C3.A9galement">Voir également</h2>
<p>{{ Cssxref("margin") }} ; {{ Cssxref("margin-left") }} ; {{ Cssxref("margin-right") }} ; {{ Cssxref("margin-top") }}</p>
Revenir à cette révision