La propriété margin-bottom définit la marge basse appliquée à un élément. On peut définir une marge négative qui rapprochera l'élément de ses voisins ou une marge positive qui l'en écartera..

Cette propriété n'a aucun effet sur les éléments en ligne (inline) qui ne sont pas remplacés comme <tt> ou <span>.

Syntaxe

/* Valeurs de longueur */
/* Type <length>     */
margin-bottom: 10px;    /* Une longueur absolue */
margin-bottom: 1em;     /* Une longueur relative à la taille du texte */
margin-bottom: 5%;      /* Une longueur relative à la
                 largeur du bloc englobant */

/* Valeurs avec un mot-clé */
margin-bottom: auto;

/* Valeurs globales*/
margin-bottom: inherit;
margin-bottom: initial;
margin-bottom: unset;

La valeur de cette propriété peut être le mot-clé auto, une longueur (<length>) ou un pourcentage (<percentage>). Cette valeur peut être nulle, positive ou négative.

Valeurs

<length>
Cette valeur définit une largeur fixée. Pour les valeurs qui peuvent être utilisées, voir la page sur le type <length>.
<percentage>
Une valeur en pourcentage (type <percentage> qui est relative à la largeur du bloc englobant.
auto
Voir margin.

Syntaxe formelle

<length> | <percentage> | auto

Exemples

CSS

Grâce à la feuille de style on définit la marge basse et la hauteur des différentes div :

.box0 {
  margin-bottom:1em;
  height:3em;
}
.box1 {
  margin-bottom:-1.5em;
  height:4em;
}
.box2 {
  border:1px dashed black;
  border-width:1px 0;
  margin-bottom:2em;
}

On ajoute quelques règles afin de mieux visualiser les effets obtenus :

.container {
  background-color:orange;
  width:320px;
  border:1px solid black;
}
div {
  width:320px;
  background-color:gold;
}

HTML

<div class="container">
<div class="box0">Boîte 0</div>
<div class="box1">Boîte 1</div>
<div class="box2">La marge négative de 1 m'attire vers le haut</div>
</div>

Résultat

Spécifications

Spécification État Commentaires
CSS Basic Box Model
La définition de 'margin-bottom' dans cette spécification.
Version de travail Pas de modification significative.
CSS Transitions
La définition de 'margin-bottom' dans cette spécification.
Version de travail margin-bottom peut désormais être animée.
CSS Level 2 (Revision 1)
La définition de 'margin-bottom' dans cette spécification.
Recommendation L'effet sur les éléments en ligne est supprimé.
CSS Level 1
La définition de 'margin-bottom' dans cette spécification.
Recommendation Définition initiale.

Valeur initiale0
Applicabilitétous les éléments exceptés ceux dont les types display pour les tableaux ne sont pas table-caption, table et inline-table. S'applique aussi à ::first-letter.
Héritéenon
Pourcentagesse rapporte à la largeur du bloc contenant
Médiavisuel
Valeur calculéele pourcentage tel que spécifé ou une longeur absolue
Type d'animationune longueur
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 1Edge Support complet 12Firefox Support complet 1IE Support complet 3Opera Support complet 3.5Safari Support complet 1WebView Android Support complet 1Chrome Android ? Edge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet 6Safari iOS Support complet 1Samsung Internet Android ?
autoChrome Support complet 1Edge ? Firefox Support complet 1IE Support complet 6
Notes
Support complet 6
Notes
Notes The auto value is not supported in quirks mode.
Opera Support complet 3.5Safari Support complet 1WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Support complet 4Opera Android ? Safari iOS ? Samsung Internet Android ?

Légende

Support complet  
Support complet
Compatibilité inconnue  
Compatibilité inconnue
Voir les notes d'implémentation.
Voir les notes d'implémentation.

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, Sebastianz, teoli, FredB, ThePrisoner
Dernière mise à jour par : SphinxKnight,