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

J'ai une page de travail en cours sur ce site et je pensais que la partie la plus difficile de cette page serait le script et le style pour filtrer les résultats, mais en réalité la partie filtrage fonctionne comme prévu, c'est juste un problème de style/alignement qui me rend confus. Je tombe sur La partie en question est le contenu principal divmyBtnContainer - ci-dessous, vous pouvez voir le bloc gris pour trier les résultats, TOUS, COURANT, ACOUSTIQUE, etc. Comme vous pouvez le voir, n'importe quel bouton avec deux lignes de texte (wrap) sera au-dessus du bouton lui-même Créez un espace vide supplémentaire - vous verrez COLORCHANGI

P粉618358260 · Answer

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

P粉604507867 · Answer

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/