为什么减少行高不会减少（点击）区域？

Question

我正在做一个个人项目，为图像添加缩略图，您可以滚动浏览并单击以设置主图像。我注意到发生了一件奇怪的事情。

我在此处的 Stackblitz 项目中重现了该问题 (https://stackblitz.com/edit/angular-fidgzq?file=src/styles.css)

如果我在缩略图中将.thumbnail-image-button-icon的行高设置为20px-display.component.css（或者在[中导入~@angular/material/prebuilt-themes/deeppurple-amber.css =38=]), "Next Thumbnail Page Clicked" 将触发的区域超出了 .thumbnail-image-button-down 按钮的区域。

但是，如果行高为 inherit，计算正常（不导入 angular 主题），“单击的下一个缩略图页面”将触发的区域恰好在周围.thumbnail-image-button-down 按钮。

我认为降低行高可能在视觉上做到了这一点，但 div 展开了，但是，正如您在屏幕截图中看到的那样，高度明显不同。此外，如果您检查 .thumbnail-image-button-down 按钮，您可以看到它没有展开。

如何减小 .thumbnail-image-button-down 按钮的大小以及“已单击下一个缩略图页面”将触发的区域？

Answer 1

我认为这是因为 font-size: 5em 很大，即 80px。如果您指定 line-height 小于 80px，则可点击区域无论如何都会超出这些边界。

解决方案可能会阻止溢出：

.thumbnail-image-button-icon {
  ...
  overflow: hidden;
}

Forked Stackblitz

为什么减少行高不会减少（点击）区域？

Why doesn't reducing line-height reduce (click) area?

css

onclick

grid-layout

angular

line-height