html - <a> 元素的百分比高度与父 <div> 高度不准确

Question

在我的作业中，我最近遇到了很多关于 height:x%; 的问题。它在我的代码的某些部分使用时不准确，例如:

我的 <a>元素，<div> 的子元素, 有一个 child <img> . <a>有 %1 的填充，和 100 - 2(以弥补填充增加的高度)= <div> 的 98% 高度.因为我希望整张图片都可以作为链接点击，所以我嵌套了 <img>。在<a>高度和宽度为 100% 的元素正好适合。所以我现在想，我应该看到一张至少适合垂直方向的狗的图片。但是我明白了:

https://gyazo.com/0b36f8c7efa70d7dc2b6155c821e1b1e

如您所见，填充是正确的，宽度是正确的，但高度不是。它扩展了 <a> 的两倍填充.我也试过从高度中减去两倍的填充，但它的差别很小。还在外面。

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>
    <a href="disclaimer.html">View disclaimer</a>
    <div id="testedwith">tested with Google Chrome</div>
  </footer>
</div>

Answer 1

在您的 CSS 中，添加 box-sizing: border-box; a#homeiconlink {...}。

默认情况下，当您指定高度时，它不会考虑边距、填充或边框。指定 border-box 会更改此设置，以便您指定的高度为总高度。更多信息，请访问 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model和 https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing