margin-bottom

La propriété margin-bottom définit la marge basse appliquée à un élément. On peut définir une marge négative.

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;

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

Compatibilité des navigateurs