Percent height of <a> element not accurate to parent <div> height - html

Question

In my assignment, I've been having a lot of issues lately with height:x%; it's not accurate when used in some parts of my code, such as this:
My <a> element, a child of <div>, has a child <img>. <a> has padding of %1, and 100 - 2(to make up for the added height from padding) = 98% height of <div>. Since I want the entire picture to be clickable as a link, I nest the <img> in the <a> element with 100% height and width to fit right in. So I'm thinking at this point, I should see a picture of a dog that at least fits in vertically. However I get this:
https://gyazo.com/0b36f8c7efa70d7dc2b6155c821e1b1e
As you can see, the padding is correct, the width is, but the height is not. It extends by twice the padding of <a>. I tried also subtracting twice the padding from the height yet it makes a very small difference. It's still outside.
div#top {
width: 100%;
height: 20vh;
background-color: black;
color: limegreen;
}
a#homeiconlink {
width: 13%;
height: 98%;
padding: 1%;
float: left;
}
img#homeicon {
width: 100%;
height: 100%;
}
h2#title {
width: 85%;
height: 100%;
float: left;
}
h2 {
margin: 0;
font-family: Arial;
font-variant: small-caps;
}
body {
background-color: yellow;
}
div#sidebar {
width: 15%;
height: 60vh;
background-color: green;
float: left;
}
a {
text-decoration: none;
color: inherit;
}
a.sidebar:hover {
background-color: limegreen;
color: white;
}
a.sidebar {
display: block;
background-color: green;
color: limegreen;
padding: 2.5%;
}
div#contentspace {
width: 85%;
height: 60vh;
margin: 0px;
background-color: limegreen;
color: white;
float: left;
}
div#content {
padding: 2.5%;
}
div#footerspace {
width: 100%;
height: 20vh;
}
footer {
padding: 2.5%;
clear: both;
background-color: darkgreen;
color: limegreen;
margin: 0;
text-align: center;
}
div#testedwith {
font-style: italic;
color: lightgray;
text-align: right;
}
<div id="top">
<a href="home.html" id="homeiconlink">
<img src="dog.png" alt="logo" id="homeicon">
</a>
<h2 id="title">
Adopt a dog or cat Foundation
</h2>
</div>
<div id="sidebar">
<a class="sidebar" href="home.html">Home page</a>
<a class="sidebar" href="browse.html">Browse available pets</a>
<a class="sidebar" href="find.html">Find a dog/cat</a>
<a class="sidebar" href="dogcare.html">Dog Care</a>
<a class="sidebar" href="catcare.html">Cat Care</a>
<a class="sidebar" href="giveaway.html">Have a pet to give away</a>
<a class="sidebar" href="contact.html">Contact us</a>
</div>
<div id="contentspace">
<div id="content">
<h2>
Welcome!
</h2>
<br>
<p>
At Adopt a dog or cat foundation (TM), we strive to save as many endangered dogs and cats lives as possible from the animal pound. We invite all who are loving towards animals to adopt and care for a dog or cat of your choice from somebody who can no
longer give them the care they deserve. We strive to maintain a good community, and have a good reputation for that. Any dog or cat you adopt will most certainly be a good companion and are well trained and disease free. Thank you for helping us
shape the world into a more hospitable one!
<br>
<br>-AADOCF
</p>
</div>
</div>
<div id="footerspace">
<footer>
View disclaimer
<div id="testedwith">tested with Google Chrome</div>
</footer>
</div>

Answer 1

In your CSS, add box-sizing: border-box; a#homeiconlink {...}.
By default, when you specify a height, it does not take margins, padding, or borders into account. Specifying border-box changes this so that the height you specify is total height. More info at https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model and https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing