1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
|
---
title: margin-bottom
slug: Web/CSS/margin-bottom
tags:
- CSS
- Propriété
- Reference
translation_of: Web/CSS/margin-bottom
---
{{CSSRef}}
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..
{{EmbedInteractiveExample("pages/css/margin-bottom.html")}}
Cette propriété n'a aucun effet sur les éléments en ligne (_inline_) qui ne sont pas remplacés comme {{HTMLElement("tt")}} ou {{HTMLElement("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 {{cssxref("<length>")}}.
- `<percentage>`
- : Une valeur en pourcentage (type {{cssxref("<percentage>")}} qui est relative à la **largeur** du bloc englobant.
- `auto`
- : Voir {{cssxref("margin")}}.
### Syntaxe formelle
{{csssyntax}}
## 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
{{EmbedLiveSample('Exemples',350,200)}}
## Spécifications
| Spécification | État | Commentaires |
| -------------------------------------------------------------------------------------------- | ---------------------------------------- | ----------------------------------------------- |
| {{SpecName('CSS3 Box', '#margin-bottom', 'margin-bottom')}} | {{Spec2('CSS3 Box')}} | Pas de modification significative. |
| {{SpecName('CSS3 Transitions', '#animatable-css', 'margin-bottom')}} | {{Spec2('CSS3 Transitions')}} | `margin-bottom` peut désormais être animée. |
| {{SpecName('CSS2.1', 'box.html#margin-properties', 'margin-bottom')}} | {{Spec2('CSS2.1')}} | L'effet sur les éléments en ligne est supprimé. |
| {{SpecName('CSS1', '#margin-bottom', 'margin-bottom')}} | {{Spec2('CSS1')}} | Définition initiale. |
{{cssinfo}}
## Compatibilité des navigateurs
{{Compat("css.properties.margin-bottom")}}
|
