Pourquoi lors de l'alignement vertical d'un élément de bouton dans un div, l'élément a plus d'espace vertical que celui défini par les marges CSS ?

Question

Ma page de travaux en cours est sur ce site

Je pensais que la partie la plus difficile de cette page serait les scripts et les styles utilisés pour filtrer les résultats, mais en fait la partie filtrage fonctionne comme prévu, c'est juste un problème de style/alignement qui me rend confus

La partie avec laquelle j'ai des problèmes est le contenu principal div myBtnContainer - ci-dessous vous pouvez voir le bloc gris pour trier les résultats, TOUS, COURANT, ACOUSTIQUE, etc

Comme vous pouvez le voir, tout bouton avec deux lignes de texte (retour à la ligne) créera un espace blanc supplémentaire au-dessus du bouton lui-même - vous verrez que CHANGEMENT DE COULEUR est le premier bouton où cela se produit - cela ne changera pas seulement le bouton. repoussera également le point de départ de la ligne suivante vers le bas

Je suis très débutant ici - juste assez intelligent pour rechercher sur Google les pièces dont j'ai besoin, puis copier/coller/éditer par essais et erreurs - c'est généralement suffisant pour y faire face, mais cette fois je me suis retrouvé dans une impasse

Toute aide serait grandement appréciée

J'ai regardé dans les outils de développement de Safari pour voir s'il s'agissait d'un problème de remplissage, et pour autant que je sache, ce n'est pas le problème, mais c'est probablement la seule chose que je pourrai résoudre (ou peut-être que ce n'est même pas le cas... )

Answer 1

Vous pouvez utiliser une boîte flexible comme celle-ci

#myBtnContainer {display:flex;flex-wrap: wrap;}

Cela alignera verticalement les éléments par défaut

Answer 2

En effet, comme @Austin l'a mentionné, l'utilisation de flexbox est la méthode recommandée. Plus précisément, ajoutez simplement le CSS suivant à votre page :

#myBtnContainer {
    display: flex;
    flex-direction: row; /* optional, because it's the default */
    flex-wrap: wrap;
}

Vous pouvez en apprendre davantage sur flexbox, c'est un système très basique et important utilisé sur les sites Web. Je recommande la page web suivante : https://css-tricks.com/snippets/css/a-guide-to-flexbox/