Dans le cours : CSS : Maîtriser les Flexbox

Accédez au cours complet aujourd’hui

Inscrivez-vous aujourd’hui pour accéder à plus de 23 100 cours dispensés par des experts.

Générer un espace entre les cartes

Générer un espace entre les cartes - Tutoriel CSS

Dans le cours : CSS : Maîtriser les Flexbox

Démarrer mon mois d’essai gratuit Acheter pour mon équipe

Générer un espace entre les cartes

“

J'aimerais ajuster un dernier détail dans ma mise en page sous forme de carte. J'aimerais un petit espace entre ces cartes. Dans le CSS, il y a une propriété rien que pour ça. Direction ma feuille de style. Cette propriété se place au niveau des flex containers. Donc, dans mon cas, je vais placer cette propriété au niveau de mon élément Section qui a la classe cards. Cette propriété s'appelle gap. Gap, en anglais, ça veut dire un trou, un espace. Je vais mettre ici, par exemple, un espace de 20 pixels. Je reviens dans mon document, je rafraîchis ma page et, voilà, j'ai un espace de 20 pixels entre mes cartes. J'ai un espace de 20 pixels entre mes colonnes et également entre mes lignes. Par contre, je n'ai pas cet espace au début de mon flex container, je n'ai pas cet espace avant la première rangée. Je n'ai pas non plus cet espace à la fin du flex container. Je n'ai pas cet espace après la dernière rangée. Effectivement, la propriété gap ajoute un espace, mais uniquement à l'intérieur…

Table des matières