From 149319bb8c7b1394a443f0877c3460cd362aa815 Mon Sep 17 00:00:00 2001 From: julieng Date: Fri, 17 Sep 2021 20:58:15 +0200 Subject: move *.html to *.md --- files/fr/web/css/margin/index.html | 184 ------------------------------------- files/fr/web/css/margin/index.md | 184 +++++++++++++++++++++++++++++++++++++ 2 files changed, 184 insertions(+), 184 deletions(-) delete mode 100644 files/fr/web/css/margin/index.html create mode 100644 files/fr/web/css/margin/index.md (limited to 'files/fr/web/css/margin') diff --git a/files/fr/web/css/margin/index.html b/files/fr/web/css/margin/index.html deleted file mode 100644 index 16beec5c1d..0000000000 --- a/files/fr/web/css/margin/index.html +++ /dev/null @@ -1,184 +0,0 @@ ---- -title: margin -slug: Web/CSS/margin -tags: - - CSS - - Propriété - - Reference -translation_of: Web/CSS/margin -translation_of_original: Web/CSS/margin-new ---- -
{{CSSRef}}
- -

La propriété margin 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")}}.

- -

Il est possible d'utiliser des valeurs négatives pour chacun des côtés.

- -
{{EmbedInteractiveExample("pages/css/margin.html")}}
- -

Les marges haute et basse n'ont aucun effet sur les élements en ligne (inline) qui ne sont pas remplacés (par exemple les {{HTMLElement("span")}} ou {{HTMLElement("code")}}).

- -
-

Note : Les marges créent un espace supplémentaire à l'extérieur de l'élément. Le « remplissage » ({{cssxref("padding")}}) permet quant à lui de créer un espace supplémentaire à l'intérieur de l'élément.

-
- -

Syntaxe

- -
/* 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;
-
- -

La propriété margin 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é auto. 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.

- - - -

Valeurs

- -

Cette propriété peut accepter une, deux, trois ou quatre valeurs avec les types suivants :

- -
-
<length>
-
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>")}}.
-
<percentage>
-
Une valeur relative, exprimée en pourcentage (type {{cssxref("<percentage>")}}, à la largeur du bloc englobant. On peut utiliser des valeurs négatives.
-
auto
-
auto est remplacé par une valeur adaptée (il peut être utilisé pour centrer les blocs, par exemple, div { width:50%;  margin:0 auto; } permet de centrer un conteneur div horizontalement).
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

Exemple simple

- -

CSS

- -
.ex1 {
-  margin: auto;
-  background: gold;
-  width: 66%;
-}
-.ex2 {
-  margin: 20px 0px 0 -20px;
-  background: gold;
-  width: 66%;
-}
- -

HTML

- -
<div class="ex1">
-  margin:     auto;
-  background: gold;
-  width:      66%;
-</div>
-<div class="ex2">
-  margin:     20px 0px 0px -20px;
-  background: gold;
-  width:      66%;
-</div>
- -

Résultat

- -

{{EmbedLiveSample('Exemple_simple')}}

- -

Autres exemples

- -
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 */
-
- -

Notes

- -

Centrer horizontalement

- -

Afin de centrer un élément horizontalement, avec un navigateur « moderne » on peut utiliser {{cssxref("display")}}: flex; {{cssxref("justify-content")}}: center;.

- -

Les anciens navigateurs comme IE8-9 ne gèrent pas ces valeurs. Aussi, il faudra utiliser margin: 0 auto pour centrer un élément au sein de son parent.

- -

Fusion des marges

- -

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 l'article sur la fusion des marges.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Box', '#margin', 'margin')}}{{Spec2('CSS3 Box')}}Aucun changement significatif.
{{SpecName('CSS3 Transitions', '#animatable-css', 'margin')}}{{Spec2('CSS3 Transitions')}}margin peut désormais être animée.
{{SpecName('CSS2.1', 'box.html#margin-properties', 'margin')}}{{Spec2('CSS2.1')}}Retrait de l'effet sur les éléments en ligne (inline).
{{SpecName('CSS1', '#margin', 'margin')}}{{Spec2('CSS1')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

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

- -

Voir aussi

- - diff --git a/files/fr/web/css/margin/index.md b/files/fr/web/css/margin/index.md new file mode 100644 index 0000000000..16beec5c1d --- /dev/null +++ b/files/fr/web/css/margin/index.md @@ -0,0 +1,184 @@ +--- +title: margin +slug: Web/CSS/margin +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/margin +translation_of_original: Web/CSS/margin-new +--- +
{{CSSRef}}
+ +

La propriété margin 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")}}.

+ +

Il est possible d'utiliser des valeurs négatives pour chacun des côtés.

+ +
{{EmbedInteractiveExample("pages/css/margin.html")}}
+ +

Les marges haute et basse n'ont aucun effet sur les élements en ligne (inline) qui ne sont pas remplacés (par exemple les {{HTMLElement("span")}} ou {{HTMLElement("code")}}).

+ +
+

Note : Les marges créent un espace supplémentaire à l'extérieur de l'élément. Le « remplissage » ({{cssxref("padding")}}) permet quant à lui de créer un espace supplémentaire à l'intérieur de l'élément.

+
+ +

Syntaxe

+ +
/* 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;
+
+ +

La propriété margin 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é auto. 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.

+ + + +

Valeurs

+ +

Cette propriété peut accepter une, deux, trois ou quatre valeurs avec les types suivants :

+ +
+
<length>
+
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>")}}.
+
<percentage>
+
Une valeur relative, exprimée en pourcentage (type {{cssxref("<percentage>")}}, à la largeur du bloc englobant. On peut utiliser des valeurs négatives.
+
auto
+
auto est remplacé par une valeur adaptée (il peut être utilisé pour centrer les blocs, par exemple, div { width:50%;  margin:0 auto; } permet de centrer un conteneur div horizontalement).
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

Exemple simple

+ +

CSS

+ +
.ex1 {
+  margin: auto;
+  background: gold;
+  width: 66%;
+}
+.ex2 {
+  margin: 20px 0px 0 -20px;
+  background: gold;
+  width: 66%;
+}
+ +

HTML

+ +
<div class="ex1">
+  margin:     auto;
+  background: gold;
+  width:      66%;
+</div>
+<div class="ex2">
+  margin:     20px 0px 0px -20px;
+  background: gold;
+  width:      66%;
+</div>
+ +

Résultat

+ +

{{EmbedLiveSample('Exemple_simple')}}

+ +

Autres exemples

+ +
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 */
+
+ +

Notes

+ +

Centrer horizontalement

+ +

Afin de centrer un élément horizontalement, avec un navigateur « moderne » on peut utiliser {{cssxref("display")}}: flex; {{cssxref("justify-content")}}: center;.

+ +

Les anciens navigateurs comme IE8-9 ne gèrent pas ces valeurs. Aussi, il faudra utiliser margin: 0 auto pour centrer un élément au sein de son parent.

+ +

Fusion des marges

+ +

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 l'article sur la fusion des marges.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Box', '#margin', 'margin')}}{{Spec2('CSS3 Box')}}Aucun changement significatif.
{{SpecName('CSS3 Transitions', '#animatable-css', 'margin')}}{{Spec2('CSS3 Transitions')}}margin peut désormais être animée.
{{SpecName('CSS2.1', 'box.html#margin-properties', 'margin')}}{{Spec2('CSS2.1')}}Retrait de l'effet sur les éléments en ligne (inline).
{{SpecName('CSS1', '#margin', 'margin')}}{{Spec2('CSS1')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

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

+ +

Voir aussi

+ + -- cgit v1.2.3-54-g00ecf