Why when vertically aligning a button element in a div, the element has more vertical space than defined by CSS margins?

Question

My work in progress page on this site

I thought the hardest part of this page would be the scripts and styles used to filter the results, but actually the filtering part works as expected, it's just a styling/alignment issue that confuses me

The part I'm having trouble with is the main content div myBtnContainer - below you can see the gray block for sorting the results, ALL, CURRENT, ACOUSTIC, etc.

As you can see, any button with two lines of text (which wraps automatically) will create extra white space above the button itself - you will see that COLOR CHANGING is the first button where this happens - this will not only Pushing the button down also pushes the starting point of the next line down

I'm very beginner-friendly here - just smart enough to google the parts I need and then copy/paste/edit for trial and error - that's usually enough to cope with, but this time I hit a dead end

Any help would be greatly appreciated

I've looked in Safari's developer tools to see if it's a padding issue, and as far as I know, it's not the issue, but it's probably the only thing I'll be able to troubleshoot (or maybe it's not even...)

Answer 1

You can use flex box like this

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

This will vertically align items by default

Answer 2

Indeed, like @Austin mentioned, using flexbox is your recommended way. Specifically, just add the following css to the page:

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

You can learn about flexbox in more detail, it is a very basic and important system used on websites. I recommend the following webpage: https://css-tricks.com/snippets/css/a-guide-to-flexbox/