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/gap/index.md | 205 ++++++++++++++++++++---------------------- 1 file changed, 97 insertions(+), 108 deletions(-) (limited to 'files/fr/web/css/gap') diff --git a/files/fr/web/css/gap/index.md b/files/fr/web/css/gap/index.md index a4e27262ac..e8142808f4 100644 --- a/files/fr/web/css/gap/index.md +++ b/files/fr/web/css/gap/index.md @@ -8,27 +8,26 @@ tags: - Reference translation_of: Web/CSS/gap --- -
{{CSSRef}}
+{{CSSRef}} -

La propriété gap est une propriété raccourcie pour {{cssxref("row-gap")}} et {{cssxref("column-gap")}} qui permet de définir les espaces entre les lignes et entre les colonnes d'une grille.

+La propriété **`gap`** est [une propriété raccourcie](/fr/docs/Web/CSS/Propriétés_raccourcies) pour {{cssxref("row-gap")}} et {{cssxref("column-gap")}} qui permet de définir les espaces entre les lignes et entre les colonnes d'une grille. -
{{EmbedInteractiveExample("pages/css/gap.html")}}
+{{EmbedInteractiveExample("pages/css/gap.html")}} -
-

Note : La propriété {{cssxref("grid-gap")}} a initialement été définie dans le module de spécification CSS Grid Layout. Cette version préfixée a été remplacée par gap. Toutefois, à des fins de compatibilité envers les navigateurs qui n'implémentent pas encore la version non-préfixée, mieux vaut utiliser les deux versions.

-
+> **Note :** La propriété {{cssxref("grid-gap")}} a initialement été définie dans le module de spécification [CSS Grid Layout](/fr/docs/Web/CSS/CSS_Grid_Layout). Cette version préfixée a été remplacée par `gap`. Toutefois, à des fins de compatibilité envers les navigateurs qui n'implémentent pas encore la version non-préfixée, mieux vaut utiliser les deux versions. -

Syntaxe

+## Syntaxe -
/* Une valeur de longueur */
-/* Type <length>          */
+```css
+/* Une valeur de longueur */
+/* Type           */
 gap: 20px;
 gap: 1em;
 gap: 3vmin;
 gap: 0.5cm;
 
 /* Une valeur proportionnelle */
-/* Type <percentage>          */
+/* Type           */
 gap: 16%;
 gap: 100%;
 
@@ -39,7 +38,7 @@ gap: 3vmin 2vmax;
 gap: 0.5cm 2mm;
 
 /* Une ou deux valeurs proportionnelles */
-/* Type <percentage>             */
+/* Type              */
 gap: 16% 100%;
 gap: 21px 82%;
 
@@ -51,53 +50,53 @@ gap: calc(20px + 10%) calc(10% - 5px);
 gap: inherit;
 gap: initial;
 gap: unset;
-
+``` -

Cette propriété est définie avec une valeur <'row-gap'>, éventuellement suivi d'une valeur <'column-gap'>. Si <'column-gap'> n'est pas utilisée, la valeur utilisée sera la même que <'row-gap'>.

+Cette propriété est définie avec une valeur `<'row-gap'>`, éventuellement suivi d'une valeur `<'column-gap'>`. Si `<'column-gap'>` n'est pas utilisée, la valeur utilisée sera la même que `<'row-gap'>`. -

<'row-gap'> et <'column-gap'> sont des valeurs de type <length> ou <percentage>.

+`<'row-gap'>` et `<'column-gap'>` sont des valeurs de type `` ou ``. -

Valeurs

+### Valeurs -
-
<length>
-
La largeur de l'espace entre les lignes et/ou entre les colonnes (cf. {{cssxref("<length>")}} pour les valeurs utilisables).
-
<percentage>
-
La largeur de l'espace entre les lignes et/ou entre les colonnes en fonction de la taille de l'élément englobant (cf. {{cssxref("<percentage>")}} pour les valeurs utilisables).
-
+- `` + - : La largeur de l'espace entre les lignes et/ou entre les colonnes (cf. {{cssxref("<length>")}} pour les valeurs utilisables). +- `` + - : La largeur de l'espace entre les lignes et/ou entre les colonnes en fonction de la taille de l'élément englobant (cf. {{cssxref("<percentage>")}} pour les valeurs utilisables). -

Syntaxe formelle

+### Syntaxe formelle {{csssyntax}} -

Exemples

+## Exemples -

Disposition flexible

+### Disposition flexible -

{{SeeCompatTable}}

+{{SeeCompatTable}} -

HTML

+#### HTML -
<div id="flexbox">
-  <div></div>
-  <div></div>
-  <div></div>
-  <div></div>
-  <div></div>
-  <div></div>
-</div>
-
+```html +
+
+
+
+
+
+
+
+``` -

CSS

+#### CSS -
#flexbox {
+```css
+#flexbox {
   display: flex;
   flex-wrap: wrap;
   width: 300px;
   gap: 20px 5px;
 }
 
-#flexbox > div {
+#flexbox > div {
   border: 1px solid green;
   background-color: lime;
   flex: 1 1 auto;
@@ -105,118 +104,108 @@ gap: unset;
   height: 50px;
 
 }
-
+``` -

Résultat

+#### Résultat -

{{EmbedLiveSample("Disposition_flexible", "auto", "120px")}}

+{{EmbedLiveSample("Disposition_flexible", "auto", "120px")}} -

Grilles CSS

+### Grilles CSS -

HTML

+#### HTML -
<div id="grid">
-  <div></div>
-  <div></div>
-  <div></div>
-  <div></div>
-  <div></div>
-  <div></div>
-  <div></div>
-  <div></div>
-  <div></div>
-</div>
+```html +
+
+
+
+
+
+
+
+
+
+
+``` -

CSS

+#### CSS - +``` -
#grid {
+```css
+#grid {
   display: grid;
   height: 200px;
   grid-template: repeat(3, 1fr) / repeat(3, 1fr);
   gap: 20px 5px;
 }
 
-#grid > div {
+#grid > div {
   border: 1px solid green;
   background-color: lime;
 }
-
+``` -

Résultat

+#### Résultat -

{{EmbedLiveSample("Grilles_CSS", "auto", "120px")}}

+{{EmbedLiveSample("Grilles_CSS", "auto", "120px")}} -

Multi-colonnes

+### Multi-colonnes -

HTML

+#### HTML -
<p class="content-box">
+```html
+

   voici un texte en multi-colonne sur des colonnes avec
   une gouttière de 40 pixels créée grâce à la propriété
-  CSS <code>gap</code>. Est-ce que c'est pas trop génial ?
-</p>
-
+ CSS gap. Est-ce que c'est pas trop génial ? +

+``` -

CSS

+#### CSS -
.content-box {
+```css
+.content-box {
   column-count: 3;
   gap: 40px;
 }
-
+``` + +#### Résultat + +{{EmbedLiveSample("Multi-column_layout", "auto", "120px")}} -

Résultat

+## Spécifications -

{{EmbedLiveSample("Multi-column_layout", "auto", "120px")}}

+| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------- | ---------------------------------------- | -------------------- | +| {{SpecName("CSS3 Box Alignment", "#propdef-gap", "gap")}} | {{Spec2("CSS3 Box Alignment")}} | Définition initiale. | -

Spécifications

+{{cssinfo}} - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS3 Box Alignment", "#propdef-gap", "gap")}}{{Spec2("CSS3 Box Alignment")}}Définition initiale.
+## Compatibilité des navigateurs -

{{cssinfo}}

+### Prise en charge pour les dispositions flexibles -

Compatibilité des navigateurs

+{{Compat("css.properties.gap.flex_context")}} -

Prise en charge pour les dispositions flexibles

+### Prise en charge pour les grilles CSS -

{{Compat("css.properties.gap.flex_context")}}

+{{Compat("css.properties.gap.grid_context")}} -

Prise en charge pour les grilles CSS

+### Prise en charge pour les dispositions multi-colonnes -

{{Compat("css.properties.gap.grid_context")}}

+{{Compat("css.properties.gap.multicol_context")}} -

Prise en charge pour les dispositions multi-colonnes

+## Voir aussi -

{{Compat("css.properties.gap.multicol_context")}}

+- Les versions standards, sans préfixe, des propriétés associées : -

Voir aussi

+ - {{cssxref("row-gap")}}, + - {{cssxref("column-gap")}}, - +- [Guide : les concepts de base : les gouttières](/fr/docs/Web/CSS/CSS_Grid_Layout/Les_concepts_de_base#Les_gouttières) -- cgit v1.2.3-54-g00ecf