div 内のボタン要素を垂直方向に整列させると、要素の垂直方向のスペースが CSS マージンで定義されているスペースよりも大きくなるのはなぜですか?

Question

このサイトの私の進行中のページ

このページで最も難しい部分は結果をフィルタリングするために使用されるスクリプトとスタイルだと思いましたが、実際にはフィルタリング部分は期待どおりに機能します。これは私を混乱させている単なるスタイル/配置の問題です

私が問題を抱えている部分は、メイン コンテンツ div myBtnContainer です。その下には、結果 (ALL、CURRENT、ACOUSTIC など) を並べ替えるための灰色のブロックが表示されます。

ご覧のとおり、テキストが 2 行あるボタン (自動的に折り返されます) は、ボタン自体の上に余分な空白を作成します。色の変更が最初のボタンであることがわかります。これは、ボタンを押すだけではありません。ボタンを押すと、次の行の開始点も下に移動します。

私はここでは非常に初心者に優しいです - 必要な部分をグーグルで検索し、試行錯誤してコピー/貼り付け/編集するだけの賢明さだけです - 通常はそれで十分対処できますが、今回は行き止まりになりました

どんな助けでも大歓迎です

Safari の開発者ツールを調べて、パディングの問題かどうかを確認しました。私の知る限り、それは問題ではありません。しかし、おそらくトラブルシューティングできるのはこれだけです (あるいは、トラブルシューティングさえできないかもしれません) ...)

Answer 1

次のようにフレックスボックスを使用できます

リーリー

これにより、デフォルトで項目が垂直方向に整列されます

Answer 2

確かに、@Austin が述べたように、フレックスボックスの使用は推奨される方法です。 具体的には、次の CSS をページに追加するだけです:

リーリー

フレックスボックスについて詳しく学ぶことができます。フレックスボックスは、Web サイトで使用される非常に基本的かつ重要なシステムです。次の Web ページをお勧めします: https://css-tricks.com/snippets/css/a-guide-to-flexbox/