-
Notifications
You must be signed in to change notification settings - Fork 8k
/
index.md
192 lines (160 loc) · 7.54 KB
/
index.md
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
189
190
191
192
---
title: margin-left
slug: Web/CSS/margin-left
l10n:
sourceCommit: c5dd9c3b9d503a56dc04b6b8f88e89194dc82d7f
---
{{CSSRef}}
La propriété [CSS](/fr/docs/Web/CSS) **`margin-left`** d'un élément définit l'espace horizontal à gauche qui formera [la zone de marge](/fr/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#zone_de_marge) à gauche de l'élément. On peut avoir une marge gauche négative qui rapproche l'élément de ses voisins ou une marge positive qui l'en écarte.
{{EmbedInteractiveExample("pages/css/margin-left.html")}}
Les marges verticales de deux boîtes adjacentes peuvent fusionner entre elles. C'est ce qu'on appelle [_la fusion de marges_](/fr/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing).
Dans certains cas où la largeur est sur-contrainte (autrement dit quand `width`, `margin-left`, `border`, `padding`, la taille de la zone de contenu et `margin-right` sont toutes définies), `margin-left` est ignorée. La valeur calculée sera la même que si `auto` avait été utilisée.
## Syntaxe
```css
/* Valeurs de longueur */
/* Type <length> */
margin-left: 10px; /* Une longueur absolue */
margin-left: 1em; /* Une longueur absolue relative à la taille du texte */
margin-left: 5%; /* Une marge dont la taille est relative à la largeur
du bloc englobant */
/* Valeur avec un mot-clé */
margin-left: auto;
/* Valeurs globales */
margin-left: inherit;
margin-left: initial;
margin-left: revert;
margin-left: revert-layer;
margin-left: unset;
```
La valeur de cette propriété peut être le mot-clé `auto`, une longueur (`<length>`) ou un pourcentage (`<percentage>`). La valeur peut être positive, nulle ou négative.
### Valeurs
- [`<length>`](/fr/docs/Web/CSS/length)
- : La taille de la marge, exprimée comme une valeur fixe.
- [`<percentage>`](/fr/docs/Web/CSS/percentage)
- : La taille de la marge exprimée avec un pourcentage relatif à la dimension du [bloc englobant](/fr/docs/Web/CSS/Containing_block) sur l'axe en ligne (qui correspond à la largeur pour une langue écrite horizontalement, voir [`writing-mode`](/fr/docs/Web/CSS/writing-mode)).
- `auto`
- : Un mot-clé qui indique que la marge gauche s'adapte à l'espace restant. Cet espace est principalement défini par le mode de disposition utilisé. Si `margin-left` et `margin-right` valent toutes les deux `auto`, m'espace calculé sera réparti de façon équitable. Le tableau suivant précise les différents cas :
<table class="standard-table">
<thead>
<tr>
<th scope="col">Valeur de <a href="/fr/docs/Web/CSS/display"><code>display</code></a></th>
<th scope="col">Valeur de <a href="/fr/docs/Web/CSS/float"><code>float</code></a></th>
<th scope="col">Valeur de <a href="/fr/docs/Web/CSS/position"><code>position</code></a></th>
<th scope="col">Valeur calculée pour <code>auto</code></th>
<th scope="col">Commentaires</th>
</tr>
</thead>
<tbody>
<tr>
<th>
<code>inline</code>, <code>inline-block</code>, <code>inline-table</code>
</th>
<th>N'importe laquelle</th>
<th><code>static</code> ou <code>relative</code></th>
<td><code>0</code></td>
<td>Disposition en ligne</td>
</tr>
<tr>
<th>
<code>block</code>, <code>inline</code>, <code>inline-block</code>, <code>block</code>, <code>table</code>, <code>inline-table</code>, <code>list-item</code>, <code>table-caption</code>
</th>
<th>N'importe laquelle</th>
<th><code>static</code> ou <code>relative</code></th>
<td>
<code>0</code> sauf si <code>margin-left</code> et <code>margin-right</code> valent <code>auto</code>. Dans ce cas, la valeur utilisée sera celle qui permet de centrer l'élément au sein de l'élément parent.
</td>
<td>Disposition en bloc</td>
</tr>
<tr>
<th>
<code>block</code>, <code>inline</code>, <code>inline-block</code>, <code>block</code>, <code>table</code>, <code>inline-table</code>, <code>list-item</code>, <code>table-caption</code>
</th>
<th><code>left</code> ou <code>right</code></th>
<th><code>static</code> ou <code>relative</code></th>
<td><code>0</code></td>
<td>Disposition en bloc avec les éléments flottants</td>
</tr>
<tr>
<th>
N'importe quelle <code>table-*</code>, sauf <code>table-caption</code>
</th>
<th>N'importe laquelle</th>
<th>N'importe laquelle</th>
<td><code>0</code></td>
<td>
Les éléments <code>table-*</code> n'ont pas de marge, il faut utiliser <a href="/fr/docs/Web/CSS/border-spacing"><code>border-spacing</code></a> à la place.
</td>
</tr>
<tr>
<th>
N'importe laquelle, sauf <code>flex</code>, <code>inline-flex</code>, ou <code>table-*</code>
</th>
<th>N'importe laquelle</th>
<th>
<code>fixed</code> ou <code>absolute</code>
</th>
<td>
<code>0</code> sauf si <code>margin-left</code> et <code>margin-right</code> valent <code>auto</code>. Dans ce cas, la valeur utilisée sera celle qui permet de centrer la boîte de bordure dans la zone de largeur disponible si elle fixée.
</td>
<td>Positionnement absolu.</td>
</tr>
<tr>
<th><code>flex</code>, <code>inline-flex</code></th>
<th>N'importe laquelle</th>
<th>N'importe laquelle</th>
<td>
<code>0</code>, sauf s'il reste de l'espace libre. Dans ce cas, l'espace restant sera distribué de façon équitable entre toutes les marges avec <code>auto</code>.
</td>
<td>Boîtes flexibles.</td>
</tr>
</tbody>
</table>
## Définition formelle
{{CSSInfo}}
## Syntaxe formelle
{{CSSSyntax}}
## Exemples
Les valeurs en pourcentage pour `margin-left` sont relatives à la taille en ligne du conteneur.
### CSS
```css
.exemple {
margin-left: 50%;
}
```
### HTML
```html
<p>
Un grand rosier se trouvait à l'entrée du jardin ; les roses qu'il
portait étaient blanches, mais trois jardiniers étaient en train de les
peindre en rouge.
</p>
<p class="exemple">
Alice s'avança pour les regarder, et, au moment où elle approchait, elle en
entendit un qui disait : « Fais donc attention, Cinq, et ne
m'éclabousse pas ainsi avec ta peinture. »
</p>
<p>
« Ce n'est pas de ma faute, » dit Cinq d'un ton bourru, « c'est
Sept qui m'a poussé le coude. »
</p>
```
### Résultat
{{EmbedLiveSample("","","250")}}
## Spécifications
{{Specifications}}
## Compatibilité des navigateurs
{{Compat}}
## Voir aussi
- Les autres propriétés physiques pour les marges :
- [`margin-top`](/fr/docs/Web/CSS/margin-top)
- [`margin-right`](/fr/docs/Web/CSS/margin-right)
- [`margin-bottom`](/fr/docs/Web/CSS/margin-bottom)
- La propriété raccourcie [`margin`](/fr/docs/Web/CSS/margin) qui synthétise les 4
- Les propriétés logiques pour les marges :
- [`margin-block-start`](/fr/docs/Web/CSS/margin-block-start)
- [`margin-block-end`](/fr/docs/Web/CSS/margin-block-end)
- [`margin-inline-start`](/fr/docs/Web/CSS/margin-inline-start)
- [`margin-inline-end`](/fr/docs/Web/CSS/margin-inline-end)
- Les propriétés raccourcies pour les deux axes :
- [`margin-block`](/fr/docs/Web/CSS/margin-block)
- [`margin-inline`](/fr/docs/Web/CSS/margin-inline)