How do I change the hitbox of an image in CSS?

Question

I made a website where in the beginning, you see an arrow pointing down, so you can click on it to scroll down automatically. I changed the position of the image with padding-left and padding-top to get it into the lower center.

The problem is that the clickable area of the image goes from the top left to the image.

How do I decrease the hitbox?

Thanks in advance

Ps: I did the HTML like this:

<a href="...">
  <img src="..."></img>
</a>

Answer 1

Use margin instead of padding if your layout will tolerate it. Otherwise use box-sizing: border-box .

Here is a good, short read regarding that.