Link's area greater than image - html

Question

I'm trying to put some images to my website which will work as a hyperlink to another part of my page. The thing is that when I use the <a> tag and the <img> tag, the <a> tag overextends the <img> on its left side making clickable a part of an area that i don't wish to be clickable. I want to keep the <a> tag in the limits of the <img>.
This is my code: (sorry but since I'm new to all this, i don't know how to post it in any other way)
.firstproject {
height: 100px;
width: 100px;
background-color: red;
margin-left: 100px;
}
<p><a class="firstproject" href="https://www.youtube.com/"><img
class="firstproject" src="front.jpg"></a></p>
Hope you can figure it out!
PS: I used red background so the area would be visible and see better its extend.
PS2: I used the "youtube" address as an example of the link

Answer 1

What I did is simply remove the margin-left: -100px;. I do not know what the reason for this margin is, but if this is important for your code please let me know and ill adjust my awnser.
If you want to move the image more to the right you can use the following css:
position:relative;
left:25px;
See CSS - Position for more information.
.firstproject {
background-color: red;
width:100px;
height:100px;
}
.Secondproject{
background-color: red;
width:100px;
height:100px;
position:relative;
left:50px;
}
<p>
<a class="firstproject" href="https://www.youtube.com/"><img class="firstproject" src="front.jpg"></a>
</p>
<p>
<a class="Secondproject" href="https://www.youtube.com/"><img class="firstproject" src="front.jpg"></a>
</p>

Answer 2

It's because of the margin on your img element and a. You can change the margin of the a element to 200px and remove it from the img to get the same result without an a the goes out of bounds.
Also you don't need to set a width and height to the a. It's adjusting it's size to the content.
.firstproject-img {
height: 100px;
width: 100px;
background-color: blue;
}
.firstproject-a {
background-color: red;
margin-left: 200px;
}
<p>
<a class="firstproject-a" href="https://www.youtube.com/">
<img class="firstproject-img" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
</a>
</p>

Answer 3

You can apply display: inline-block to your a tag and that will give you the expected result.
To contain the image within a tag set images width to 100%
.firstproject {
height: 100px;
width: 100px;
background-color: red;
display: inline-block;
}
.firstproject > img {
width: 100%'
}
p {padding-left: 100px;}
<p><a class="firstproject" href="https://www.youtube.com/"><img
class="firstproject" src="front.jpg"></a></p>
Edit:
To push the a to right you could add padding-left to the parent of it
p {
padding-left: 100px;
}

Answer 4

To limit the size of the a tag to the extent of the defined class I'm adding display: block to make sure the height/width is being applied(display: inline-block would work too).
I have two examples in the link below, one that leaves your margin and one that keeps it, as I'm not sure of what you was looking for.
https://jsbin.com/gahunohebu/edit?html,css,output
HTML:
<p><a class="firstproject" href="https://www.youtube.com/"><img
class="firstproject" src="http://via.placeholder.com/350x150"></a></p>
<p><a class="secondproject" href="https://www.youtube.com/"><img
class="secondproject" src="http://via.placeholder.com/350x150"></a></p>
CSS:
.firstproject {
height: 100px;
width: 100px;
background-color: red;
margin-left: 100px;
display: block;
}
.secondproject {
height: 100px;
width: 100px;
background-color: red;
display: block;
}
You can read more about CSS display at CSS Tricks: https://css-tricks.com/almanac/properties/d/display/