Warum hat das Element beim vertikalen Ausrichten eines Schaltflächenelements in einem Div mehr vertikalen Platz als durch CSS-Ränder definiert?

Question

Meine Work-in-Progress-Seite befindet sich auf dieser Website

Ich dachte, der schwierigste Teil dieser Seite wären die Skripte und Stile, die zum Filtern der Ergebnisse verwendet werden, aber tatsächlich funktioniert der Filterteil wie erwartet, es ist nur ein Stil-/Ausrichtungsproblem, das mich verwirrt

Der Teil, mit dem ich Probleme habe, ist der Hauptinhaltsbereich myBtnContainer – unten sehen Sie den grauen Block zum Sortieren der Ergebnisse, ALLE, AKTUELL, AKUSTISCH usw.

Wie Sie sehen können, erzeugt jede Schaltfläche mit zwei Textzeilen (Zeilenumbruch) zusätzlichen Leerraum über der Schaltfläche selbst – Sie werden sehen, dass FARBWECHSEL die erste Schaltfläche ist, bei der dies geschieht – dadurch wird nicht nur die Schaltfläche beim Herunterdrücken geändert verschiebt auch den Startpunkt der nächsten Zeile nach unten

Ich bin hier ein sehr Anfänger – gerade schlau genug, die Teile zu googeln, die ich brauche, und sie dann zum Ausprobieren zu kopieren/einzufügen/zu bearbeiten – das reicht normalerweise aus, um damit klarzukommen, aber dieses Mal bin ich in einer Sackgasse gelandet

Jede Hilfe wäre sehr dankbar

Ich habe in den Entwicklertools von Safari nachgesehen, ob es sich um ein Auffüllproblem handelt, und soweit ich weiß, ist es nicht das Problem, aber es ist wahrscheinlich das Einzige, was ich beheben kann (oder vielleicht ist es nicht einmal ... )

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/