La propriété CSS gap est une propriété qui permet de définir un espace entre les éléments d'un conteneur de type grille ou flex. Elle est utilisée en conjonction avec les propriétés de grille ou de flexbox pour créer des mises en page complexes.
Dans l'exemple ci-dessus, nous avons défini un conteneur avec une mise en page de type grille ou flex et nous avons défini un espace de 10 pixels entre chaque élément de ce conteneur.
La propriété gap peut également être utilisée avec les propriétés row-gap et column-gap pour définir un espace entre les lignes et les colonnes d'un conteneur de type grille :
Dans cet exemple, nous avons défini un espace de 10 pixels entre chaque ligne du conteneur et un espace de 20 pixels entre chaque colonne.
La Syntaxe CSS
Prise en charge de la propriété css dans les navigateurs
Il est important de noter que la propriété gap est prise en charge uniquement dans les navigateurs récents et n'est pas compatible avec tous les navigateurs. Si vous devez garantir la compatibilité avec les anciens navigateurs, vous devrez utiliser des propriétés de marge ou de padding pour créer des espaces entre les éléments de votre conteneur.
Valeurs de la propriété
La propriété CSS gap peut être définie avec les valeurs suivantes :
Un nombre entier suivi d'une unité de mesure, comme 10px ou 1em. Cette valeur définit l'espace entre les éléments du conteneur.
La valeur normal, qui définit un espace normal entre les éléments du conteneur. Cette valeur est définie par le navigateur et peut varier d'un navigateur à l'autre.
Voici quelques exemples d'utilisation de la propriété gap avec différentes valeurs :
.container {
display: grid;
gap: 10px; /* définit un espace de 10 pixels entre les éléments du conteneur */
}
.container {
display: grid;
gap: 1em; /* définit un espace de 1 em entre les éléments du conteneur */
}
.container {
display: grid;
gap: normal; /* définit un espace normal entre les éléments du conteneur */
}
Il est important de noter que la propriété gap n'accepte que des valeurs numériques et la valeur normal. Toute autre valeur sera ignorée par le navigateur.