div에서 버튼 요소를 수직으로 정렬할 때 CSS 여백으로 정의된 것보다 요소의 수직 공간이 더 많은 이유는 무엇입니까?

Question

진행 중인 작업 페이지가 이 사이트에 있습니다

이 페이지에서 가장 어려운 부분은 결과를 필터링하는 데 사용되는 스크립트와 스타일일 것이라고 생각했지만 실제로 필터링 부분은 예상대로 작동합니다. 스타일/정렬 문제일 뿐이어서 혼란스럽습니다

제가 문제를 겪고 있는 부분은 메인 콘텐츠 div myBtnContainer입니다. 아래에서 ALL, CURRENT, ACOUSTIC 등 결과를 정렬하는 회색 블록을 볼 수 있습니다.

보시다시피 두 줄의 텍스트(단어 줄 바꿈)가 있는 버튼은 버튼 자체 위에 추가 공백을 생성합니다. 이러한 일이 발생하는 첫 번째 버튼은 색상 변경임을 알 수 있습니다. 이는 버튼만 변경하는 것이 아닙니다. 다음 줄의 시작점도 아래로 밀어냅니다

저는 매우 초보자입니다. 필요한 부분을 Google에 검색한 다음 시행착오를 위해 복사/붙여넣기/편집할 수 있을 만큼 똑똑합니다. 일반적으로 이 정도는 처리하기에 충분하지만 이번에는 막다른 골목에 도달했습니다

어떤 도움이라도 대단히 감사하겠습니다

패딩 문제인지 알아보기 위해 Safari의 개발자 도구를 살펴봤고, 제가 아는 한 문제는 아니지만 아마도 제가 해결할 수 있는 유일한 문제일 것입니다(또는 심지어는 아닐 수도 있습니다...) )

Answer 1

플렉스박스를 이렇게 사용할 수 있습니다

으아아아

이렇게 하면 기본적으로 항목이 수직으로 정렬됩니다

Answer 2

실제로 @Austin이 언급한 것처럼 flexbox를 사용하는 것이 권장되는 방법입니다. 구체적으로 다음 CSS를 페이지에 추가하세요.

으아아아

Flexbox에 대해 더 자세히 알아볼 수 있습니다. Flexbox는 웹사이트에서 사용되는 매우 기본적이고 중요한 시스템입니다. 다음 웹페이지를 추천합니다: https://css-tricks.com/snippets/css/a-guide-to-flexbox/