Why can I click on a link outside of its text element? - html

Question

I'm building a forum and I have a link that can be clicked outside of its text, how can I undo it?
I also have an image inside a tag that can be clicked outside of its image, I want to undo that too.
I have tried - position: relative; but it didn't work.
Here is the HTML code of the image.
<div class="nav-list">
<a class="home_A"href="Home.php">
<img class="homeIcon" src="photos/icon.png">
</a>
</div>
CSS of the image
.homeIcon{
width: 200px;
display:block;
margin:auto;
margin: 0 auto;
}
CSS of the <a> link
.signinForm a{
margin: auto;
display:block;
text-align:center;
margin-top: 7px;
color: #006db6;
font-size: 20px;
}
HTML of the <a> link
<form method="POST" class="signinForm">
<ul>
<li> <h1 class="signinH1">sign in</h1></li>
<li> <input type="text" placeholder="User name"name="username_login"class="username" value="<?php if(isset($_POST['username_login'])){echo $_POST['username_login'];}?>" required></li>
<li> <input type="password" placeholder="Password" name="password_login" class="password" value="<?php if(isset($_POST['password_login'])){echo $_POST['password_login'];}?>" required></li>
<li> <input type="submit" value="Log in"class="signinbutton"></li>
<li>Sign up</li>
</ul>
</form>
Thanks all.

Answer 1

It might have to do with your CSS styles for <a> tags and/or <img> tags.
My guess is that something like the following might fix your issue
.homeIcon {
display: inline-block;
}

Answer 2

Try with something like:
img.homeIcon {
display: inline-block;
}
div.home_A {
align-content:center;
margin: 0 auto;
text-align: center; // Not mandatory but useful
}

Answer 3

Assign display: inline-block of course, also use object-fit:contain on <img> and set the line-height: of <a> to 1 to 1.25 depending on how your font is setup but there's very little play in the value.
:root {
font: 1ch/1 'Segoe UI'
}
body {
font-size: 2ch;
}
a {
font-size: 2.5rem;
line-height: 1.15;
}
a,
img {
display: inline-block;
}
img {
object-fit: contain;
width: 3rem;
height: 3rem;
margin-bottom: -3px;
}
<div class='frame'>
<a class="zOne" href="https://stackoverflow.com/users/2813224/zer00ne">
..::Zer00ne::..
<img src='https://i.ibb.co/Kx33pSY/01.jpg'></a>
</div>

Answer 4

<!--HTML_CODE-->
<div class="nav-list">
<a class="home_A"href="Home.php">
<img class="homeIcon" src="photos/icon.png">
</a>
</div>
<form method="POST" class="signinForm">
<ul>
<li> <h1 class="signinH1">sign in</h1></li>
<li> <input type="text" placeholder="User
name"name="username_login"class="username" value="<?php
if(isset($_POST['username_login'])){echo $_POST['username_login'];}?>" required>
</li>
<li> <input type="password" placeholder="Password" name="password_login"
class="password" value="<?php if(isset($_POST['password_login'])){echo
$_POST['password_login'];}?>" required></li>
<li> <input type="submit" value="Log in"class="signinbutton"></li>
<div class="signUp-block">
<li>Sign up</li></div>
</ul>
</form>
/*CSS_CODE*/
.homeIcon{
width: 200px;
display:block;
margin:auto;
margin: 0 auto;
}
.signUp-block{
display: flex;
flex-direction: row;
justify-content: center;
}
.signinForm a{
margin: auto;
display:inline-block;
text-align:center;
margin-top: 7px;
color: #006db6;
font-size: 20px;
}
.homeIcon {
display: inline-block;
}