margin-bottom

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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 initiale	`0`
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ée	non
Pourcentages	se rapporte à la largeur du bloc contenant
Valeur calculée	le pourcentage tel que spécifié ou une longueur absolue
Type d'animation	une longueur

Syntaxe formelle

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

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

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

<anchor-name> = 
  <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