我正在做一个个人项目，为图像提供缩略图，您可以滚动浏览并单击以设置主图像。我注意到发生了一件奇怪的事情。
我在这里的 Stackblitz 项目中重新创建了这个问题（https://stackblitz.com/edit/angular-fidgzq?file=src/styles.css）
如果我在 thumbnails-display.component.css 中将 line-height 设置为.thumbnail-image-button-icon（20px或在 style.css 中导入 ~@angular/material/prebuilt-themes/deeppurple-amber.css），“下一个缩略图页面单击的区域” " 将触发超出.thumbnail-image-button-down按钮的区域。
但是，如果 line-height 是inherit，计算正常（不导入角度主题），“点击下一个缩略图页面”将触发的区域正好在.thumbnail-image-button-down按钮周围。
我认为减少 line-height 可能在视觉上这样做了，但是让 div 展开了，但是，正如您在屏幕截图中看到的那样，高度有很大不同。此外，如果您检查.thumbnail-image-button-down按钮，您可以看到它没有展开。
如何减小.thumbnail-image-button-down按钮的大小以及“单击下一个缩略图页面”将触发的区域？