From 258ba7b4be62d8640477a3bd3146d08b00cb70ec Mon Sep 17 00:00:00 2001 From: julieng Date: Fri, 17 Sep 2021 20:59:20 +0200 Subject: convert content to md --- files/fr/web/css/margin-left/index.md | 291 ++++++++++++++++++---------------- 1 file changed, 151 insertions(+), 140 deletions(-) (limited to 'files/fr/web/css/margin-left') diff --git a/files/fr/web/css/margin-left/index.md b/files/fr/web/css/margin-left/index.md index b0791c0906..e80263ac29 100644 --- a/files/fr/web/css/margin-left/index.md +++ b/files/fr/web/css/margin-left/index.md @@ -7,20 +7,21 @@ tags: - Reference translation_of: Web/CSS/margin-left --- -
{{CSSRef}}
+{{CSSRef}} -

La propriété margin-left d'un élément définit l'espace horizontal à gauche qui formera la 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.

+La propriété **`margin-left`** d'un élément définit l'espace horizontal à gauche qui formera la 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")}}
+{{EmbedInteractiveExample("pages/css/margin-left.html")}} -

Les marges des côtés droit et gauche de deux boîtes adjacentes peuvent fusionner entre elles. C'est ce qu'on appelle la fusion de marges.

+Les marges des côtés droit et gauche 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ù les dimensions sont sur-contraintes (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.

+Dans certains cas où les dimensions sont sur-contraintes (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

+## Syntaxe -
/* Valeurs de longueur */
-/* Type <length>       */
+```css
+/* Valeurs de longueur */
+/* Type        */
 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
@@ -33,152 +34,162 @@ margin-left: auto;
 margin-left: inherit;
 margin-left: initial;
 margin-left: unset;
-
- -

La valeur de cette propriété peut être le mot-clé auto, une longueur (<length>) ou un pourcentage (<percentage>).

- -

Valeurs

- -
-
<length>
-
Une valeur fixe, du type {{cssxref("<length>")}} : elle peut être exprimée en pixels (px) ou en fonction de la taille du texte (em) ou être relative à la taille de la zone d'affichage (viewport) (vh).
-
<percentage>
-
Une valeur exprimée en pourcentage (type {{cssxref("<percentage>")}} relative à la largeur du bloc englobant.
-
auto
-
Un mot-clé qui indique que la marge droite s'adapte à l'espace restant. Cet espace est principalement défini par le mode de disposition utilisé.L'espace calculé sera réparti de façon équitable entre la marge droite et la marge gauche si celle-ci vaut également auto. Le tableau suivant précise les différents cas : - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Valeur de {{cssxref("display")}}Valeur de {{cssxref("float")}}Valeur de {{cssxref("position")}}Valeur calculée pour autoCommentaires
inline, inline-block, inline-tablen'importe laquellestatic ou relative0Disposition en ligne
block, inline, inline-block, block, table, inline-table, list-item, table-captionn'importe laquellestatic ou relative0 sauf si margin-left et margin-right valent auto. Dans ce cas, la valeur utilisée sera celle qui permet de centrer l'élément au sein de l'élément parent.Disposition en bloc
block, inline, inline-block, block, table, inline-table, list-item, table-captionleft ou rightstatic ou relative0Disposition en bloc avec les éléments flottants
n'importe quelle table-*, sauf table-captionn'importe laquellen'importe laquelle0Les éléments table-* n'ont pas de marge, il faut utiliser {{cssxref("border-spacing")}} à la place.
n'importe laquelle, sauf flex, inline-flex, ou table-*n'importe laquellefixed ou absolute0 sauf si margin-left et margin-right valent auto. 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.Positionnement absolu.
flex, inline-flexn'importe laquellen'importe laquelle0, sauf s'il reste de l'espace horizontal libre. Dans ce cas, l'espace restant sera distribué de façon équitable entre toutes les marges avec auto.Boîtes flexibles.
-
-
- -

Syntaxe formelle

+``` + +La valeur de cette propriété peut être le mot-clé `auto`, une longueur (``) ou un pourcentage (``). + +### Valeurs + +- `` + - : Une valeur fixe, du type {{cssxref("<length>")}} : elle peut être exprimée en pixels (`px`) ou en fonction de la taille du texte (`em`) ou être relative à la taille de la zone d'affichage (_viewport_) (`vh`). +- `` + - : Une valeur exprimée en pourcentage (type {{cssxref("<percentage>")}} relative à la largeur du bloc englobant. +- `auto` + + - : Un mot-clé qui indique que la marge droite s'adapte à l'espace restant. Cet espace est principalement défini par le mode de disposition utilisé.L'espace calculé sera réparti de façon équitable entre la marge droite et la marge gauche si celle-ci vaut également `auto`. Le tableau suivant précise les différents cas : + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Valeur de {{cssxref("display")}}Valeur de {{cssxref("float")}}Valeur de {{cssxref("position")}}Valeur calculée pour autoCommentaires
+ inline, inline-block, + inline-table + n'importe laquellestatic ou relative0Disposition en ligne
+ block, inline, inline-block, + block, table, inline-table, + list-item, table-caption + n'importe laquellestatic ou relative + 0 sauf si margin-left et + margin-right valent auto. Dans ce cas, la + valeur utilisée sera celle qui permet de centrer l'élément au sein de + l'élément parent. + Disposition en bloc
+ block, inline, inline-block, + block, table, inline-table, + list-item, table-caption + left ou rightstatic ou relative0Disposition en bloc avec les éléments flottants
+ n'importe quelle table-*, sauf table-caption + n'importe laquellen'importe laquelle0 + Les éléments table-* n'ont pas de marge, il faut utiliser + {{cssxref("border-spacing")}} à la place. +
+ n'importe laquelle, sauf flex, + inline-flex, ou table-* + n'importe laquelle + fixed ou absolute + + 0 sauf si margin-left et + margin-right valent auto. 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. + Positionnement absolu.
flex, inline-flexn'importe laquellen'importe laquelle + 0, sauf s'il reste de l'espace horizontal libre. Dans ce + cas, l'espace restant sera distribué de façon équitable entre toutes les + marges avec auto. + Boîtes flexibles.
+ +### Syntaxe formelle {{csssyntax}} -

Exemples

+## Exemples -

CSS

+### CSS -
.exemple {
+```css
+.exemple {
   margin-left: 50%;
-}
+} +``` -

HTML

+### HTML -
<p>Un grand rosier se trouvait à l’entrée du jardin ;
+```html
+
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("Exemples")}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Box', '#the-margin', 'margin-left')}}{{Spec2('CSS3 Box')}}Pas de modification significative depuis CSS 2.1.
{{SpecName('CSS3 Transitions', '#animatable-css', 'margin-left')}}{{Spec2('CSS3 Transitions')}}margin-left peut désormais être animée.
{{SpecName('CSS3 Flexbox', '#item-margins', 'margin-left')}}{{Spec2('CSS3 Flexbox')}}Le comportement de margin-left sur les éléments flexibles est défini.
{{SpecName('CSS2.1', 'box.html#margin-properties', 'margin-left')}}{{Spec2('CSS2.1')}}L'effet sur les éléments en ligne (inline) est retiré.
{{SpecName('CSS1', '#margin-left', 'margin-left')}}{{Spec2('CSS1')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.margin-left")}}

+

+``` + +### Résultat + +{{EmbedLiveSample("Exemples")}} + +## Spécifications + +| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------------------- | ---------------------------------------- | ----------------------------------------------------------------------- | +| {{SpecName('CSS3 Box', '#the-margin', 'margin-left')}} | {{Spec2('CSS3 Box')}} | Pas de modification significative depuis CSS 2.1. | +| {{SpecName('CSS3 Transitions', '#animatable-css', 'margin-left')}} | {{Spec2('CSS3 Transitions')}} | `margin-left` peut désormais être animée. | +| {{SpecName('CSS3 Flexbox', '#item-margins', 'margin-left')}} | {{Spec2('CSS3 Flexbox')}} | Le comportement de `margin-left` sur les éléments flexibles est défini. | +| {{SpecName('CSS2.1', 'box.html#margin-properties', 'margin-left')}} | {{Spec2('CSS2.1')}} | L'effet sur les éléments en ligne (_inline_) est retiré. | +| {{SpecName('CSS1', '#margin-left', 'margin-left')}} | {{Spec2('CSS1')}} | Définition initiale. | + +{{cssinfo}} + +## Compatibilité des navigateurs + +{{Compat("css.properties.margin-left")}} -- cgit v1.2.3-54-g00ecf