gap CSS propriété

Définition de la CSS gap.

La propriété de gouttière CSS gap est un raccourci qui permet de spécifier à la fois l'espacement minimum qui sépare chaque ligne et chaque colonne au sein de leur container Grid Css, Flex Css ou Multi-Columns Css.

Exemple de syntaxe CSS gap :

gap : 0 ;
gap : 5px 56px;
gap : normal 2%;

La propriété de feuille de style gap CSS peut prendre une valeur de chaque propriété suivante :

row-gap: espace minimal qui sépare chaque ligne.
column-gap: espace minimal qui sépare chaque colonne. Peut être omise, dans ce cas, sa valeur est row-gap.

Exemple de code gap CSS

Conditions d'application de la CSS gap.

La propriété de feuille de style gap CSS est applicable sur l'ensemble des balises HTML ou XHTML, si elles sont le container Grid Css (display:[inline-]grid), Flex Css (display:[inline-]flex) ou Multi-Column Css (column[-*]).

Héritage des valeurs Css de gap.

Les balises filles HTML ou XHTML n'héritent pas de la propriété de feuille de style gap.

Conditions d'animation de gap en CSS3.

La CSS gap est une propriété de feuille de style qui peut être utilisée pour les animations CSS et transitions CSS.

Règles de syntaxes CSS pour gap.

Règle d'écriture de la Css gap

Si la feuille de style gap Css est suivie :

d'une valeur, alors cette dernière sera appliquée à row-gap et column-gap.
deux valeurs, alors la première sera appliquée à l'espace entre les lignes et la seconde à l'espace entre les colonne.

Compatibilités navigateurs de la propriété gap

Détails des versions de la CSS gap: Propriété gap est compatible avec CSS3 et plus.

Résumé du support navigateurs de la CSS gap: Propriété CSS gap est compatible sous une forme préfixée avec Chrome 57; Propriété CSS gap est compatible à partir de Chrome 66; Propriété CSS gap est compatible sous une forme préfixée avec Firefox 52; Propriété CSS gap est compatible à partir de Firefox 56; Propriété CSS gap est incompatible pour Internet Explorer; Propriété CSS gap est compatible sous une forme préfixée à partir de Internet Explorer ou Edge 16; Propriété CSS gap est compatible sous une forme préfixée avec Opera 44; Propriété CSS gap est compatible à partir de Opera 53; Propriété CSS gap est compatible sous une forme préfixée à partir de Safari 10.1; Propriété CSS gap est compatible sous une forme préfixée avec Chrome Android 57; Propriété CSS gap est compatible à partir de Chrome Android 66; Propriété CSS gap est compatible sous une forme préfixée avec Firefox Android 52; Propriété CSS gap est compatible à partir de Firefox Android 61; Propriété CSS gap est compatible sous une forme préfixée à partir de iOS Safari 10.3

Propriétés CSS préfixées de gap

Vous trouverez ci-dessous les propriétés CSS préfixées équivalentes à la propriété gap CSS :

Pour le container de type Grid Css (display:[inline-]grid) :
La première spécification W3c utilisait grid-gap.

Versions préfixées de gap :

grid-gap : 10px 5px;
gap : 10px 5px;

Votre avis sur la définition gap en CSS

Votez pour la définition CSS `gap`

Votes: 5 / 5 - 4 votes
Cliquez sur une étoile pour voter.