为什么在div中垂直对齐按钮元素时，元素的垂直空间比CSS边距定义的要多？

Question

我的正在进行中的页面在这个网站上

我以为这个页面最困难的部分是用于过滤结果的脚本和样式，但实际上过滤部分正如预期地工作，只是一个样式/对齐问题让我困惑

我遇到问题的部分是主要内容div myBtnContainer - 在下面你可以看到用于排序结果的灰色块，ALL，CURRENT，ACOUSTIC等

如你所见，任何有两行文字（自动换行）的按钮都会在按钮本身上方创建额外的空白空间 - 你会看到COLOR CHANGING是第一个出现这种情况的按钮 - 这不仅会将按钮向下推，还会将下一行的起点向下推

我在这里非常入门 - 只是足够聪明地使用谷歌搜索我所需的部分，然后复制/粘贴/编辑进行试错 - 这通常足够应付，但这次我陷入了死胡同

任何帮助将不胜感激

我已经在Safari的开发者工具中查看了是否是填充问题，据我所知，不是这个问题，但这可能是我能够排除故障的唯一事情（或者甚至不是...）

Answer 1

你可以像这样使用flex box

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

这将默认垂直对齐项目

Answer 2

确实，像@Austin提到的那样，使用flexbox是您推荐的方式。 具体来说，只需将以下css添加到页面中：

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

您可以更详细地了解flexbox，它是在网站上使用的一个非常基本和重要的系统。我推荐以下网页：https://css-tricks.com/snippets/css/a-guide-to-flexbox/