為什麼在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/

#