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 qui rapprochera l'élément de ses voisins ou une marge positive qui l'en écartera..

Exemple interactif

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

css
/* 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.

Définition formelle

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
Valeur calculéele pourcentage tel que spécifié ou une longueur absolue
Type d'animationune longueur

Syntaxe formelle

margin-bottom = 
<length-percentage> |
auto |
<anchor-size()>

<length-percentage> =
<length> |
<percentage>

<anchor-size()> =
anchor-size( [ <anchor-element> || <anchor-size> ]? , <length-percentage>? )

<anchor-element> =
<dashed-ident>

<anchor-size> =
width |
height |
block |
inline |
self-block |
self-inline

Exemples

CSS

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

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

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

HTML

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

Specification
CSS Box Model Module Level 3
# margin-physical

Compatibilité des navigateurs

BCD tables only load in the browser