diff options
Diffstat (limited to 'files/fr/web/css/row-gap/index.md')
| -rw-r--r-- | files/fr/web/css/row-gap/index.md | 98 |
1 files changed, 38 insertions, 60 deletions
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 : [`column-gap`](/fr/docs/Web/CSS/column-gap), [`gap`](/fr/docs/Web/CSS/gap) +- Guide sur les grilles : _[Les concepts de base des grilles CSS : les gouttières](/fr/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#les_gouttières)_ |