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
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
|
---
title: margin
slug: Web/CSS/margin
tags:
- CSS
- Propriété
- Reference
translation_of: Web/CSS/margin
translation_of_original: Web/CSS/margin-new
---
<div>{{CSSRef}}</div>
<p>La propriété <strong><code>margin</code></strong> définit la taille des marges sur les quatre côtés de l'élément. C'est une propriété raccourcie qui permet de manipuler les autres propriétés de marges : {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} et {{cssxref("margin-left")}}.</p>
<p>Il est possible d'utiliser des valeurs négatives pour chacun des côtés.</p>
<div>{{EmbedInteractiveExample("pages/css/margin.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>Les marges haute et basse n'ont aucun effet sur les élements en ligne (<em>inline</em>) qui ne sont pas <a href="/fr/docs/Web/CSS/%C3%89l%C3%A9ment_remplac%C3%A9">remplacés</a> (par exemple les {{HTMLElement("span")}} ou {{HTMLElement("code")}}).</p>
<div class="note">
<p><strong>Note : </strong>Les marges créent un espace supplémentaire à l'extérieur de l'élément. Le <em>« remplissage »</em> ({{cssxref("padding")}}) permet quant à lui de créer un espace supplémentaire à l'intérieur de l'élément.</p>
</div>
<h2 id="Syntaxe">Syntaxe</h2>
<pre class="brush:css">/* La propriété s'applique aux quatre côtés */
margin: 1em;
/* vertical | horizontal */
margin: 5% auto;
/* haut | horizontal | bas */
margin: 1em auto 2em;
/* haut | droit | bas | gauche */
margin: 2px 1em 0 auto;
/* Valeurs globales */
margin: inherit;
margin: initial;
margin: unset;
</pre>
<p>La propriété <code>margin</code> peut être définie grâce à une, deux, trois ou quatre valeurs. Chaque valeur est une valeur de type {{cssxref("<length>")}} ou de type {{cssxref("<percentage>")}} ou est le mot-clé <code><a href="#auto">auto</a></code>. Les valeurs négatives permette de dessiner l'élément plus près de ses voisins que ne l'aurait permis la valeur par défaut.</p>
<ul>
<li>Avec <strong>une</strong> valeur, celle-ci définira la marge pour les quatre côtés de la boîte</li>
<li>Avec <strong>deux</strong> valeurs, la première s'appliquera aux côtés haut et bas et la seconde aux côtés gauche et droit</li>
<li>Avec <strong>trois</strong> valeurs, la première s'appliquera au côté haut, la deuxième aux côtés gauche et droit et la troisième au côté bas</li>
<li>Avec <strong>quatre</strong> valeurs, la première s'appliquera en haut, la deuxième à droite, la troisième en bas et la quatrième à gauche (ce qui correspond au sens des aiguilles d'une montre - c'est plus facile à mémoriser).</li>
</ul>
<h3 id="Valeurs">Valeurs</h3>
<p>Cette propriété peut accepter une, deux, trois ou quatre valeurs avec les types suivants :</p>
<dl>
<dt><a id="length" name="length"><code><length></code></a></dt>
<dd>La marge est définie avec une valeur absolue. On peut utiliser des valeurs négatives. Pour les différentes unités possibles, voir la page {{cssxref("<length>")}}.</dd>
<dt><a id="percentage" name="percentage"><code><percentage></code></a></dt>
<dd>Une valeur relative, exprimée en pourcentage (type {{cssxref("<percentage>")}}, à la <strong>largeur</strong> du bloc englobant. On peut utiliser des valeurs négatives.</dd>
<dt><a id="auto" name="auto"><code>auto</code></a></dt>
<dd><code>auto </code>est remplacé par une valeur adaptée (il peut être utilisé pour centrer les blocs, par exemple, <code>div { width:50%; margin:0 auto; }</code> permet de centrer un conteneur <code>div</code> horizontalement).</dd>
</dl>
<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
<pre class="syntaxbox">{{csssyntax}}</pre>
<h2 id="Exemples">Exemples</h2>
<h3 id="Exemple_simple">Exemple simple</h3>
<h4 id="CSS">CSS</h4>
<pre class="brush: css; highlight:[2,7]">.ex1 {
margin: auto;
background: gold;
width: 66%;
}
.ex2 {
margin: 20px 0px 0 -20px;
background: gold;
width: 66%;
}</pre>
<h4 id="HTML">HTML</h4>
<pre class="brush: html"><div class="ex1">
margin: auto;
background: gold;
width: 66%;
</div>
<div class="ex2">
margin: 20px 0px 0px -20px;
background: gold;
width: 66%;
</div></pre>
<h4 id="Résultat">Résultat</h4>
<p>{{EmbedLiveSample('Exemple_simple')}}</p>
<h3 id="Autres_exemples">Autres exemples</h3>
<pre class="brush: css">margin: 5%; /* tous les côtés avec une marge de 5% */
margin: 10px; /* tous les côtés avec une marge de 10px */
margin: 1.6em 20px; /* haut et bas à 1.6em */
/* gauche et droite à 20px */
margin: 10px 3% 1em; /* haut à 10px, gauche et droite à 3% */
/* bas à 1em */
margin: 10px 3px 30px 5px; /* haut à 10px, droite à 3px */
/* bas à 30px, gauche à 5px */
margin: 1em auto; /* marge de 1em en haut et en bas */
/* la boîte est centrée horizontalement */
margin: auto; /* boîte centrée horizontalement */
/* marge nulle en haut et en bas */
</pre>
<h2 id="Notes">Notes</h2>
<h3 id="Centrer_horizontalement">Centrer horizontalement</h3>
<p>Afin de centrer un élément horizontalement, avec un navigateur « moderne » on peut utiliser {{cssxref("display")}}<code>: flex; </code>{{cssxref("justify-content")}}<code>: center;</code>.</p>
<p>Les anciens navigateurs comme IE8-9 ne gèrent pas ces valeurs. Aussi, il faudra utiliser <code>margin: 0 auto </code>pour centrer un élément au sein de son parent.</p>
<h3 id="Fusion_des_marges">Fusion des marges</h3>
<p>Les marges haute et basse des éléments sont parfois fusionnées en une seule marge qui est égale à la plus grande des deux marges. Pour plus d'informations, lire <a href="/fr/docs/Web/CSS/Modèle_de_boîte_CSS/Fusion_des_marges">l'article sur la fusion des marges</a>.</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', 'margin')}}</td>
<td>{{Spec2('CSS3 Box')}}</td>
<td>Aucun changement significatif.</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Transitions', '#animatable-css', 'margin')}}</td>
<td>{{Spec2('CSS3 Transitions')}}</td>
<td><code>margin</code> peut désormais être animée.</td>
</tr>
<tr>
<td>{{SpecName('CSS2.1', 'box.html#margin-properties', 'margin')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td>Retrait de l'effet sur les éléments en ligne (<em>inline</em>).</td>
</tr>
<tr>
<td>{{SpecName('CSS1', '#margin', 'margin')}}</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")}}</p>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li><a class="internal" href="/fr/docs/Web/CSS/Fusion_des_marges">Fusion des marges</a></li>
<li><a href="/fr/Apprendre/CSS/Introduction_à_CSS/Le_modèle_de_boîte">Le modèle de boîte CSS</a></li>
<li>{{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} et {{cssxref("margin-left")}}</li>
</ul>
|
