Click area of ​​slide arrow is wider than icon

Question

On my WordPress development website, I have a slideshow feature for galleries. When you click on a picture, it starts a slideshow. My problem is my two white arrows, one on the left and one on the right. The clickable area of ​​the arrow is wider than the size of the icon. See pictures below.

The clickable area is wider than the icon

This is the URL of my development website

I tried to include my code in this question but I was told "Your question appears to be spam".

The CSS file is "https://dev.francisbegin.ca/wp-content/plugins/gallery-lightbox-slider/css/photobox/photobox.css?ver=1.0.0.39"

The HTML played is at the bottom, before the body is closed. The ID of the containing div is "pbOverlay".

Any help would be greatly appreciated. I am new to stackoverflow, please tell me if my question is inappropriate.

Answer 1

This is most likely caused by the kerning setting of the font used by the icon. Each character has some space around it to prevent it from colliding with other characters. In the case of 18em, this space is more obvious than in other cases.

If you want to eliminate this space, you may consider using SVG or other images to replace the current text content. However, there’s nothing wrong with giving users some extra space to click.