답글 버튼의 크기는 적절하다고 생각하지만, 왼쪽의 버튼들은 그렇지 않은 것 같습니다.
.topic-footer-main-buttons 영역의 다른 버튼들과 달리, 토픽 알림 버튼은 div(.topic-notifications-button)로 감싸져 있습니다.
해당 영역의 모든 버튼, 답글 버튼 포함 (단순화된 코드):
<button></button>
알림 버튼 (단순화된 코드):
<div class="topic-notifications-button">
<button></button>
</div>
문제는 이 라인 때문에,
font-size: var(--font-up-1) 속성이 알림 버튼 래퍼 그리고 그 안의 버튼 모두에 적용된다는 것입니다.
알다시피 em 값은 부모에서 자식으로 이동할 때마다 누적되어 곱해집니다.
그 결과는 다음과 같이 설명할 수 있습니다:
<div class="topic-notifications-button" style="font-size: 1.15em;">
<button style="font-size: 1.15em;"></button>
</div>
1.15 × 1.15가 문제입니다. 알림 버튼 <button> 요소의 최종 font-size 값이 예상보다 커집니다.
처음에는 눈에 잘 띄지 않습니다. 같은 라인[1]에 있는 가장 높은 요소에 맞춰 높이를 조정하기 때문입니다. (렌치, 공유, 북마크 등) 즉, 이 컨테이너 안의 모든 버튼이 같은 높이를 가지므로 토픽 알림 버튼이 "너무 높다"고 두드러지지 않습니다.
위 GitHub 원박스에서 하이라이트된 라인을 제거하면 문제가 해결되어야 합니다:
컨테이너에 몇 개의 추가 버튼을 넣어 콘텐츠가 줄바꿈되도록 하면 이를 보여줄 수 있습니다:
첫 번째 줄의 버튼들은 모두 예상된 높이를 갖습니다.
그러나em곱셈으로 인해 예상보다 큰 알림 버튼은 같은 라인에 있는 인접 버튼의 높이를 자동으로 증가시킵니다. ↩︎
