Update fr CSS -gap docs (#3415)

* Update fr CSS -gap docs

* Revert word(s) to original translation

* Remove xref macros, minor typofixes and embedlivesample implicit arg improvement

Co-authored-by: julieng <julien.gattelier@gmail.com>

3 files changed, 108 insertions, 171 deletions

diff --git a/files/fr/web/css/column-gap/index.md b/files/fr/web/css/column-gap/index.md
index d420492323..2a28eedad4 100644
--- a/files/fr/web/css/column-gap/index.md
+++ b/files/fr/web/css/column-gap/index.md
@@ -1,21 +1,16 @@
 ---
-title: column-gap
+title: column-gap (grid-column-gap)
 slug: Web/CSS/column-gap
-tags:
-  - CSS
-  - Propriété
-  - Reference
 translation_of: Web/CSS/column-gap
+browser-compat: css.properties.column-gap
 ---
 {{CSSRef}}
 
-La propriété **`column-gap`** permet de définir l'espace entre les colonnes d'un élément.
+La propriété **`column-gap`** permet de définir la taille des espaces ([gouttières](/fr/docs/Glossary/Gutters)) entre les colonnes d'un élément.
 
-{{EmbedInteractiveExample("pages/css/column-gap.html")}}{{EmbedInteractiveExample("pages/css/grid-column-gap.html")}}
+{{EmbedInteractiveExample("pages/css/column-gap.html")}}
 
-La propriété `column-gap` était initialement définie dans le module de spécification [_Multi-column Layout_ (disposition en colonnes)](/fr/docs/Web/CSS/Colonnes_CSS). Cette définition a depuis été élargie afin de pouvoir être utilisée dans les différents modes de disposition et fait désormais partie du module de spécification _[Box Alignment](/fr/docs/Web/CSS/CSS_Box_Alignment)_. Cette propriété peut être utilisée pour les dispositions en colonnes, les dispositions flexibles ou les disposition en grille.
-
-> **Note :** Le module de spécification _[CSS Grid Layout](/fr/docs/Web/CSS/CSS_Grid_Layout)_ définissait initialement la propriété `grid-column-gap`. Cette version préfixée a été remplacée par `column-gap`. Toutefois, à des fins de compatibilité envers les navigateurs qui ne prendraient pas en charge cette évolution, mieux vaut utiliser les deux versions (voir l'exemple interactif ci-avant).
+La propriété `column-gap` était initialement définie dans le module de spécification [Colonnes CSS](/fr/docs/Web/CSS/CSS_Columns). Cette définition a depuis été élargie afin de pouvoir être utilisée dans les différents modes de disposition et fait désormais partie du module de spécification [_Box Alignment_ (alignement des boîtes en CSS)](/fr/docs/Web/CSS/CSS_Box_Alignment). Cette propriété peut être utilisée pour les dispositions multi-colonnes, les dispositions flexibles et les dispositions en grille.
 
 ## Syntaxe
 
@@ -35,6 +30,7 @@ column-gap: 3%;
 /* Valeurs globales */
 column-gap: inherit;
 column-gap: initial;
+column-gap: revert;
 column-gap: unset;
 ```
 
@@ -42,12 +38,16 @@ column-gap: unset;
 
 - `normal`
   - : Un mot-clé qui indique qu'on souhaite utiliser l'espacement par défaut créé par le navigateur. Pour les dispositions en colonnes, cette valeur correspond à `1em`, sinon elle correspond à `0`.
-- `<length>`
-  - : Une valeur de longueur (type {{cssxref("&lt;length&gt;")}}) qui définit la taille de l'espace entre les colonnes. Cette valeur peut être nulle mais ne doit pas être négative.
-- `<percentage>`
-  - : Une valeur de pourcentage (type {{cssxref("&lt;percentage&gt;")}} qui définit la taille de l'espace entre les colonnes. Cette valeur peut être nulle mais ne doit pas être négative.
+- [`<length>`](/fr/docs/Web/CSS/length)
+  - : Une valeur de longueur (type [`<length>`](/fr/docs/Web/CSS/length)) qui définit la taille de l'espace entre les colonnes. Cette valeur peut être nulle mais ne doit pas être négative.
+- [`<percentage>`](/fr/docs/Web/CSS/percentage)
+  - : Une valeur de pourcentage (type [`<percentage>`](/fr/docs/Web/CSS/percentage)) qui définit la taille de l'espace entre les colonnes. Cette valeur peut être nulle mais ne doit pas être négative.
+
+## Définition formelle
+
+{{cssinfo}}
 
-### Syntaxe formelle
+## Syntaxe formelle
 
 {{csssyntax}}
 
@@ -55,8 +55,6 @@ column-gap: unset;
 
 ### Disposition flexible
 
-{{SeeCompatTable}}
-
 #### HTML
 
 ```html
@@ -77,7 +75,7 @@ column-gap: unset;
 }
 
 #flexbox > div {
-  border: 1opx solid green;
+  border: 1px solid green;
   background-color: lime;
   flex: auto;
 }
@@ -85,32 +83,7 @@ column-gap: unset;
 
 #### Résultat
 
-{{EmbedLiveSample("Disposition_flexible","auto","120px")}}
-
-### Disposition en colonnes
-
-#### HTML
-
-```html
-<p class="content-box">
-  Un texte sur plusieurs colonnes avec une gouttière
-  de 40px paramétrée grâce à la propriété `column-gap`.
-  C'est plutôt pas mal comme effet non ?
-</p>
-```
-
-#### CSS
-
-```css
-.content-box {
-  column-count: 3;
-  column-gap: 40px;
-}
-```
-
-#### Résultat
-
-{{EmbedLiveSample("Disposition_en_colonnes", "auto", "120px")}}
+{{EmbedLiveSample("","auto","130px")}}
 
 ### Disposition en grille
 
@@ -136,48 +109,50 @@ column-gap: unset;
 }
 
 #grid > div {
+  border: 1px solid green;
   background-color: lime;
 }
 ```
 
-```css hidden
-#grid {
-  grid-column-gap: 20px;
-}
-```
-
 #### Résultat
 
-{{EmbedLiveSample("Disposition_en_grille", "auto", "120px")}}
+{{EmbedLiveSample("","auto", "130px")}}
 
-## Spécifications
+### Disposition multi-colonnes
 
-| Spécification                                                                            | État                                     | Commentaires                                                              |
-| ---------------------------------------------------------------------------------------- | ---------------------------------------- | ------------------------------------------------------------------------- |
-| {{SpecName("CSS3 Box Alignment", "#column-row-gap", "column-gap")}} | {{Spec2("CSS3 Box Alignment")}} | Applique cette propriété aux grilles et aux boîtes flexibles (_flexbox_). |
-| {{SpecName("CSS3 Grid", "#gutters", "column-gap")}}                     | {{Spec2("CSS3 Grid")}}             | Définition de l'impact de cette propriété sur les dispositions en grille. |
-| {{SpecName("CSS3 Multicol", "#column-gap", "column-gap")}}             | {{Spec2("CSS3 Multicol")}}     | Définition initiale.                                                      |
+#### HTML
 
-{{cssinfo}}
+```html
+<p class="content-box">
+  Un texte sur plusieurs colonnes avec une gouttière
+  de 40px paramétrée grâce à la propriété `column-gap`.
+  C'est plutôt pas mal comme effet non ?
+</p>
+```
 
-## Compatibilité des navigateurs
+#### CSS
 
-### Prise en charge pour les dispositions flexibles
+```css
+.content-box {
+  column-count: 3;
+  column-gap: 40px;
+}
+```
+
+#### Résultat
 
-{{Compat("css.properties.column-gap.flex_context")}}
+{{EmbedLiveSample("", "auto", "130px")}}
 
-### Prise en charge pour les dispositions en grille
+## Spécifications
 
-{{Compat("css.properties.column-gap.grid_context")}}
+{{Specifications("css.properties.column-gap.grid_context")}}
 
-### Prise en charge pour les dispositions en colonnes
+## Compatibilité des navigateurs
 
-{{Compat("css.properties.column-gap.multicol_context")}}
+{{Compat}}
 
 ## Voir aussi
 
-- {{cssxref("row-gap")}}
-- {{cssxref("gap")}}
-- Guide sur les boîtes flexibles : _[Concepts de base des flexbox](/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox)_
-- Guide sur les grilles : _[Concepts de base des grilles : les gouttières](/fr/docs/Web/CSS/CSS_Grid_Layout/Les_concepts_de_base#Les_gouttières)_
-- Guide sur la disposition multi-colonnes : _[Mettre en forme les colonnes](/fr/docs/Web/CSS/CSS_Columns/Styling_Columns)_
+- Les autres propriétés relatives aux gouttières&nbsp;: [`row-gap`](/fr/docs/Web/CSS/row-gap), [`gap`](/fr/docs/Web/CSS/gap)
+- Guide sur les grilles&nbsp;: _[Les concepts de base des grilles CSS&nbsp;: les gouttières](/fr/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#les_gouttières)_
+- Guide sur la disposition multi-colonnes&nbsp;: _[Mettre en forme les colonnes](/fr/docs/Web/CSS/CSS_Columns/Styling_Columns)_
diff --git a/files/fr/web/css/gap/index.md b/files/fr/web/css/gap/index.md
index 37dacfdc85..dd7f90dfc7 100644
--- a/files/fr/web/css/gap/index.md
+++ b/files/fr/web/css/gap/index.md
@@ -2,15 +2,14 @@
 title: gap (grid-gap)
 slug: Web/CSS/gap
 translation_of: Web/CSS/gap
+browser-compat: css.properties.gap
 ---
 {{CSSRef}}
 
-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.
+La propriété **`gap`** est [une propriété raccourcie](/fr/docs/Web/CSS/Shorthand_properties) pour [`row-gap`](/fr/docs/Web/CSS/row-gap) et [`column-gap`](/fr/docs/Web/CSS/column-gap) qui permet de définir les espaces (les [gouttières](/fr/docs/Glossary/Gutters)) entre les lignes et entre les colonnes d'une grille.
 
 {{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](/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
 
 ```css
@@ -33,7 +32,7 @@ gap: 3vmin 2vmax;
 gap: 0.5cm 2mm;
 
 /* Une ou deux valeurs proportionnelles */
-/* Type <percentage>             */
+/* Type <percentage>                    */
 gap: 16% 100%;
 gap: 21px 82%;
 
@@ -44,21 +43,26 @@ gap: calc(20px + 10%) calc(10% - 5px);
 /* Valeurs globales */
 gap: inherit;
 gap: initial;
+gap: revert;
 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 défini, la valeur utilisée sera la même que `<'row-gap'>`.
 
 `<'row-gap'>` et `<'column-gap'>` sont des valeurs de type `<length>` ou `<percentage>`.
 
 ### Valeurs
 
-- `<length>`
-  - : La largeur de l'espace entre les lignes et/ou entre les colonnes (cf. {{cssxref("&lt;length&gt;")}} 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("&lt;percentage&gt;")}} pour les valeurs utilisables).
+- [`<length>`](/fr/docs/Web/CSS/length)
+  - : La largeur de l'espace entre les pistes de grille.
+- [`<percentage>`](/fr/docs/Web/CSS/percentage)
+  - : La largeur de l'espace entre les pistes de grille en fonction de la taille de l'élément englobant.
+
+## Définition formelle
+
+{{cssinfo}}
 
-### Syntaxe formelle
+## Syntaxe formelle
 
 {{csssyntax}}
 
@@ -66,8 +70,6 @@ Cette propriété est définie avec une valeur `<'row-gap'>`, éventuellement su
 
 ### Disposition flexible
 
-{{SeeCompatTable}}
-
 #### HTML
 
 ```html
@@ -103,9 +105,9 @@ Cette propriété est définie avec une valeur `<'row-gap'>`, éventuellement su
 
 #### Résultat
 
-{{EmbedLiveSample("Disposition_flexible", "auto", "120px")}}
+{{EmbedLiveSample("", "auto", "230px")}}
 
-### Grilles CSS
+### Disposition en grille
 
 #### HTML
 
@@ -147,16 +149,16 @@ Cette propriété est définie avec une valeur `<'row-gap'>`, éventuellement su
 
 #### Résultat
 
-{{EmbedLiveSample("Grilles_CSS", "auto", "120px")}}
+{{EmbedLiveSample("", "auto", "230px")}}
 
-### Multi-colonnes
+### Disposition multi-colonnes
 
 #### HTML
 
 ```html
 <p class="content-box">
-  voici un texte en multi-colonne sur des colonnes avec
-  une gouttière de 40 pixels créée grâce à la propriété
+  Voici un texte en multi-colonne sur des colonnes avec
+  une gouttière de 40px créée grâce à la propriété
   CSS <code>gap</code>. Est-ce que c'est pas trop génial ?
 </p>
 ```
@@ -172,35 +174,17 @@ Cette propriété est définie avec une valeur `<'row-gap'>`, éventuellement su
 
 #### Résultat
 
-{{EmbedLiveSample("Multi-colonnes", "auto", "120px")}}
+{{EmbedLiveSample("", "auto", "120px")}}
 
 ## Spécifications
 
-| Spécification                                                                | État                                     | Commentaires         |
-| ---------------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
-| {{SpecName("CSS3 Box Alignment", "#propdef-gap", "gap")}} | {{Spec2("CSS3 Box Alignment")}} | Définition initiale. |
-
-{{cssinfo}}
+{{Specifications("css.properties.gap.grid_context")}}
 
 ## Compatibilité des navigateurs
 
-### Prise en charge pour les dispositions flexibles
-
-{{Compat("css.properties.gap.flex_context")}}
-
-### Prise en charge pour les grilles CSS
-
-{{Compat("css.properties.gap.grid_context")}}
-
-### Prise en charge pour les dispositions multi-colonnes
-
-{{Compat("css.properties.gap.multicol_context")}}
+{{Compat}}
 
 ## Voir aussi
 
-- Les versions standards, sans préfixe, des propriétés associées :
-
-  - {{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)
+- Les autres propriétés relatives aux gouttières&nbsp;: [`row-gap`](/fr/docs/Web/CSS/row-gap), [`column-gap`](/fr/docs/Web/CSS/column-gap)
+- Guide sur les grilles&nbsp;: _[Les concepts de base des grilles CSS&nbsp;: les gouttières](/fr/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#les_gouttières)_
diff --git a/files/fr/web/css/row-gap/index.md b/files/fr/web/css/row-gap/index.md
index d066a04862..f862e67853 100644
--- a/files/fr/web/css/row-gap/index.md
+++ b/files/fr/web/css/row-gap/index.md
@@ -1,19 +1,14 @@
 ---
 title: row-gap (grid-row-gap)
 slug: Web/CSS/row-gap
-tags:
-  - CSS
-  - Propriété
-  - Reference
 translation_of: Web/CSS/row-gap
+browser-compat: css.properties.row-gap
 ---
 {{CSSRef}}
 
-La propriété **`row-gap`** définit la taille des gouttières entre les lignes d'un élément.
+La propriété **`row-gap`** définit la taille des espaces ({{glossary("gutters", "gouttières")}}) entre les lignes d'un élément.
 
-{{EmbedInteractiveExample("pages/css/grid-row-gap.html")}}
-
-> **Note :** La propriété {{cssxref("grid-row-gap")}} a d'abord été définie avec le module de spécification [CSS Grid Layout](/fr/docs/Web/CSS/CSS_Grid_Layout). Cette propriété préfixée a ensuite été remplacée par `row-gap` dans le module [CSS Alignment](/fr/docs/Web/CSS/CSS_Box_Alignment) afin d'être généralisée à d'autres modes de disposition. 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.
+{{EmbedInteractiveExample("pages/css/row-gap.html")}}
 
 ## Syntaxe
 
@@ -26,21 +21,26 @@ row-gap: 3vmin;
 row-gap: 0.5cm;
 
 /* Valeurs proportionnelles */
-/* Type <pourcentage> */
+/* Type <pourcentage>       */
 row-gap: 10%;
 
 /* Valeurs globales */
 row-gap: inherit;
 row-gap: initial;
+row-gap: revert;
 row-gap: unset;
 ```
 
 ### Valeurs
 
-- `<pourcentage-largeur>`
-  - : La largeur de la « gouttière » placée entre les lignes de la grille. Les valeurs exprimées en pourcentages sont relatives aux dimensions de l'élément.
+- [`<length-percentage>`](/fr/docs/Web/CSS/length-percentage)
+  - : La largeur de la « gouttière » placée entre les lignes de la grille. Les valeurs exprimées en pourcentages ([`<percentage>`](/fr/docs/Web/CSS/percentage)) sont relatives aux dimensions de l'élément.
+
+## Formal definition
+
+{{cssinfo}}
 
-### Syntaxe formelle
+## Syntaxe formelle
 
 {{csssyntax}}
 
@@ -48,7 +48,18 @@ row-gap: unset;
 
 ### Disposition flexible
 
-{{SeeCompatTable}}
+#### HTML
+
+```html
+<div id="flexbox">
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+```
 
 #### CSS
 
@@ -61,6 +72,7 @@ row-gap: unset;
 }
 
 #flexbox > div {
+  border: 1px solid green;
   background-color: lime;
   flex: 1 1 auto;
   width: 100px;
@@ -68,33 +80,23 @@ row-gap: unset;
 }
 ```
 
+#### Résultat
+
+{{EmbedLiveSample('', "auto", "240px")}}
+
+### Disposition en grille
+
 #### HTML
 
 ```html
-<div id="flexbox">
-  <div></div>
-  <div></div>
-  <div></div>
+<div id="grid">
   <div></div>
   <div></div>
   <div></div>
 </div>
 ```
 
-#### Résultat
-
-{{EmbedLiveSample('Disposition_flexible', "auto", "120px")}}
-
-### Disposition sur une grille
-
 #### CSS
-
-```css hidden
-#grid {
-  grid-row-gap: 20px;
-}
-```
-
 ```css
 #grid {
   display: grid;
@@ -105,48 +107,24 @@ row-gap: unset;
 }
 
 #grid > div {
+  border: 1px solid green;
   background-color: lime;
 }
 ```
 
-#### HTML
-
-```html
-<div id="grid">
-  <div></div>
-  <div></div>
-  <div></div>
-</div>
-```
-
 #### Résultat
 
-{{EmbedLiveSample('Disposition_sur_une_grille', 'auto', 120)}}
+{{EmbedLiveSample('', 'auto', '240px')}}
 
 ## Spécifications
 
-| Spécification                                                                            | État                                     | Commentaires         |
-| ---------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
-| {{SpecName("CSS3 Box Alignment", "#propdef-row-gap", "row-gap")}} | {{Spec2("CSS3 Box Alignment")}} | Définition initiale. |
-
-{{cssinfo}}
+{{Specifications("css.properties.row-gap.grid_context")}}
 
 ## Compatibilité des navigateurs
 
-### Prise en charge pour les dispositions flexibles
-
-{{Compat("css.properties.row-gap.flex_context")}}
-
-### Prise en charge pour les grilles
-
-{{Compat("css.properties.row-gap.grid_context")}}
+{{Compat}}
 
 ## Voir aussi
 
-- Les versions sans préfixe des propriétés :
-
-  - {{cssxref("column-gap")}}
-  - {{cssxref("gap")}}
-
-- [Guide : les concepts de base : les gouttières](/fr/docs/Web/CSS/CSS_Grid_Layout/Les_concepts_de_base#Les_gouttières)
-- [Guide : les concepts de base des boîtes flexibles (flexbox)](/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox)
+- Les autres propriétés relatives aux gouttières&nbsp;: [`column-gap`](/fr/docs/Web/CSS/column-gap), [`gap`](/fr/docs/Web/CSS/gap)
+- Guide sur les grilles&nbsp;: _[Les concepts de base des grilles CSS&nbsp;: les gouttières](/fr/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#les_gouttières)_