Espace entre deux
Aujourd'hui nous n'allons pas forcément voir quelque chose de très complexe mais nous allons essayer de réfléchir à un problème simple en CSS. Comment espacer plusieurs éléments au sain d'une section? Approche1: Marge sur l'élément La première approche, qui semble la plus naturelle, serait d'utiliser une marge directement sur les éléments que l'on souhaite espacer. { … margin: 1. 5rem 0;} Cette méthode va avoir plusieurs inconvénients: Les marges de l'élément vont créer un espace non désirable si le conteneur a des marges intérieures. Si l'élément parent est en display:flex, dans ce cas-là la fusion des marges ne s'opérere plus. Espace entre les lignes css web. Si on souhaite utiliser cet élément dans une grille il faudra retirer les marges pour éviter (ce qui implique de rajouter des styles supplémentaires). On mélange ici apparence et structure, ce qui nuit à la réutilisation du style. Approche 2: Des classes utilitaires Le problème de la première approche est qu'elle n'est pas assez spécifique, elle va appliquer des marges sur tous les éléments par défaut.
Conclusion A travers cet article nous avons vu différentes manières de gérer l'espacement et les inconvénients de chacunes de ces méthodes. Il faut voir ces différentes approches comme des outils que vous pourrez utiliser suivant la situation. Comment Supprimer l'Espace Entre les Éléments de Niveau Inline?. L'approche 1 (margin) conviendra pour des éléments qui ne sont pas réutilisé et qui ont un espacement constant sur tout le site L'approche 2 (utilitaire) conviendra si vous voulez gérer les espacements au cas par cas. L'approche 3 & 4 conviendra pour créer des sections où les enfants doivent tous être espacé et qui doivent pouvoir changer de structure dans le cadre du responsive.