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..

/* 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;

Schéma illustrant le rôle de margin-bottom dans le modèle de boîte.
Cette propriété n'a aucun effet sur les éléments en ligne (inline) qui ne sont pas remplacés comme <tt> ou <span>.

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

Syntaxe

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.

Compatibilité des navigateurs

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple1 Oui133.51
auto1 ?1613.51
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
Support simple1 ? Oui4661
auto ? ? ?4 ? ? ?

1. The auto value is not supported in quirks mode.

Étiquettes et contributeurs liés au document

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