cssangularonclickgrid-layoutline-height

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

I'm working on a personal project to have thumbnails for images that you can scroll through and click to set the main image. I noticed an odd thing happening.

I re-created the issue in a Stackblitz project here (https://stackblitz.com/edit/angular-fidgzq?file=src/styles.css)

If I set the line-height of .thumbnail-image-button-icon to 20px in thumbnails-display.component.css (or import ~@angular/material/prebuilt-themes/deeppurple-amber.css in style.css), the area that the "Next Thumbnail Page Clicked" will fire is beyond the area of the .thumbnail-image-button-down button.

enter image description here

But, if the line-height is inherit, which computes to normal (without importing the angular theme), the area that the "Next Thumbnail Page Clicked" will fire is exactly around the .thumbnail-image-button-down button.

enter image description here

I thought reducing the line-height may have done so visually, but left the div expanded, but, as you can see in the screenshots, the heights are significantly different. Also, if you inspect the .thumbnail-image-button-down button, you can see it isn't expanded.

How can I reduce the size of the .thumbnail-image-button-down button as well as the area that "Next Thumbnail Page Clicked" will fire?

Solution

  • I think that's because of big font-size: 5em which is 80px. If you specify line-height less than 80px then clickable area goes beyond those boundaries anyway.

    The solution might be preventing that overflow:

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

    Forked Stackblitz