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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
|
---
title: margin-bottom
slug: Web/CSS/margin-bottom
tags:
- CSS
- Propriété
- Reference
translation_of: Web/CSS/margin-bottom
---
<div>{{CSSRef}}</div>
<p>La propriété <strong><code>margin-bottom</code></strong> 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..</p>
<div>{{EmbedInteractiveExample("pages/css/margin-bottom.html")}}</div>
<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
<p>Cette propriété n'a aucun effet sur les éléments en ligne (<em>inline</em>) qui ne sont pas remplacés comme {{HTMLElement("tt")}} ou {{HTMLElement("span")}}.</p>
<h2 id="Syntaxe">Syntaxe</h2>
<pre class="brush:css no-line-numbers">/* 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;
</pre>
<p>La valeur de cette propriété peut être le mot-clé <code>auto</code>, une longueur (<code><length></code>) ou un pourcentage (<code><percentage</code><code>></code>). Cette valeur peut être nulle, positive ou négative.</p>
<h3 id="Valeurs">Valeurs</h3>
<dl>
<dt><code><length></code></dt>
<dd>Cette valeur définit une largeur fixée. Pour les valeurs qui peuvent être utilisées, voir la page sur le type {{cssxref("<length>")}}.</dd>
<dt><code><percentage></code></dt>
<dd>Une valeur en pourcentage (type {{cssxref("<percentage>")}} qui est relative à la <strong>largeur</strong> du bloc englobant.</dd>
<dt><code>auto</code></dt>
<dd>Voir {{cssxref("margin")}}.</dd>
</dl>
<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
{{csssyntax}}
<h2 id="Exemples">Exemples</h2>
<h3 id="CSS">CSS</h3>
<p>Grâce à la feuille de style on définit la marge basse et la hauteur des différentes <code>div</code> :</p>
<pre class="brush: 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;
}
</pre>
<p>On ajoute quelques règles afin de mieux visualiser les effets obtenus :</p>
<pre class="brush: css">.container {
background-color:orange;
width:320px;
border:1px solid black;
}
div {
width:320px;
background-color:gold;
}</pre>
<h3 id="HTML">HTML</h3>
<pre class="brush: 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></pre>
<h3 id="Résultat">Résultat</h3>
<p>{{EmbedLiveSample('Exemples',350,200)}}</p>
<h2 id="Spécifications">Spécifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spécification</th>
<th scope="col">État</th>
<th scope="col">Commentaires</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Box', '#margin-bottom', 'margin-bottom')}}</td>
<td>{{Spec2('CSS3 Box')}}</td>
<td>Pas de modification significative.</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Transitions', '#animatable-css', 'margin-bottom')}}</td>
<td>{{Spec2('CSS3 Transitions')}}</td>
<td><code>margin-bottom</code> peut désormais être animée.</td>
</tr>
<tr>
<td>{{SpecName('CSS2.1', 'box.html#margin-properties', 'margin-bottom')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td>L'effet sur les éléments en ligne est supprimé.</td>
</tr>
<tr>
<td>{{SpecName('CSS1', '#margin-bottom', 'margin-bottom')}}</td>
<td>{{Spec2('CSS1')}}</td>
<td>Définition initiale.</td>
</tr>
</tbody>
</table>
<p>{{cssinfo}}</p>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
<p>{{Compat("css.properties.margin-bottom")}}</p>
|
