Currently, I have a PHP code that displays a user's profile picture, and when clicked, it takes them to their own profile. The image is displayed correctly, and the link works fine. However, there seems to be an issue with the area covered by the anchor tag extending beyond the picture and overlapping with another nearby link. How can I reduce the area covered by this anchor?
<?php
if ($searchuser == $username) {
?>
<a href="profile.php">
<div style="background-image: url('<?php echo $profilepic; ?> ')" class="user-pic"></div>
<?php
if ($searchuser == $username) {
?>
</a>
.user-pic {
margin: 0 auto;
width: 125px;
height: 125px;
border-radius: 50%;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
border: 0.09em solid white;
position: relative;
top: -60px;
padding: 0px;
z-index: -100;
}